PHPackages                             tjd/heroicons-blade - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. tjd/heroicons-blade

ActiveLibrary[Templating & Views](/categories/templating)

tjd/heroicons-blade
===================

The convinience of using Heroicons svg icons as Blade component <x-hero::icon></x-hero::icon> in Laravel

04JavaScript

Since Jan 8Pushed 4y ago1 watchersCompare

[ Source](https://github.com/tajidyakub/heroicons-blade)[ Packagist](https://packagist.org/packages/tjd/heroicons-blade)[ RSS](/packages/tjd-heroicons-blade/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

Heroicons Blade component
=========================

[](#heroicons-blade-component)

> Heroicons as a Blade component using <x-hero::icon></x-hero::icon> in your Laravel App.

[![](resources/imgs/heroicons-blade.png)](resources/imgs/heroicons-blade.png)

``

The package is using Heroicons as SVG Icons source repository and using its grouping as icon naming in the component's props.

- Tajid Yakub
-

Installation
------------

[](#installation)

Install through `composer` in your laravel app. Icons from Heroicons will be instantly available in your Laravel Views using blade componennt ` 'o:user', // the default icon use o: for outline and s: for solid
    'size' => 24, // default size, used for width and height of the svg icon
    'fill' => 'none' , // used for icon's fill color
    'stroke' => 'currentColor' // stroke props is for stroke color
])
```

By adjusting the `name` prop, component will be able to display Heroicons svg icon with the same name, for example `o:user` translated into `outline/user.svg`.

`class` attribute will be merged into `svg` element, any class attribute values defined on the `` will be defined directly in the `svg` element.

```

```

[![](resources/imgs/heroicons-blade-component-example.png)](resources/imgs/heroicons-blade-component-example.png)

Further styling
---------------

[](#further-styling)

Further styling using css is possible by creating a css class called `.tj-heroicons` the class is binded with the svg element therefor you could insert style properties in it.

What it does
------------

[](#what-it-does)

Translated `name` props will be used by `url` in the same host with laravel app and `fetch` the icon content from the public `heroicons/icons` dir which by default is using `public/icons/`, the copy proccess was done when the assets published with `vendor:publish`.

Development
-----------

[](#development)

It is a simple package, further development can be made by enhancing the javascript file in the `resources/script/` dir and `icon` anonymous component template in `resources/views/components/` dir.

References
----------

[](#references)

- Heroicons .
- Heroicons Git Repo , is cloned as a submodule in this repo inside `resources/`.

###  Health Score

15

—

LowBetter than 3% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity3

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity27

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/9bec1ad813d7ba2cf7d0b1ee1a9c2ced883553012a039ccf96861557b76c2a53?d=identicon)[tajidyakub](/maintainers/tajidyakub)

---

Top Contributors

[![tajidyakub](https://avatars.githubusercontent.com/u/23312129?v=4)](https://github.com/tajidyakub "tajidyakub (13 commits)")

---

Tags

bladecomponentheroiconslaravel

### Embed Badge

![Health badge](/badges/tjd-heroicons-blade/health.svg)

```
[![Health](https://phpackages.com/badges/tjd-heroicons-blade/health.svg)](https://phpackages.com/packages/tjd-heroicons-blade)
```

###  Alternatives

[mustache/mustache

A Mustache implementation in PHP.

3.3k44.6M291](/packages/mustache-mustache)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[symfony/ux-icons

Renders local and remote SVG icons in your Twig templates.

545.8M69](/packages/symfony-ux-icons)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)