PHPackages                             jtolj/simple-blade-heroicons - 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. jtolj/simple-blade-heroicons

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

jtolj/simple-blade-heroicons
============================

A simple way to use Heroicons in Blade templates.

v2.2.1(1y ago)395.5k—9.7%2MITBladePHP >=7.4

Since Nov 2Pushed 1y ago1 watchersCompare

[ Source](https://github.com/jtolj/simple-blade-heroicons)[ Packagist](https://packagist.org/packages/jtolj/simple-blade-heroicons)[ Docs](https://github.com/jtolj/simple-blade-heroicons)[ RSS](/packages/jtolj-simple-blade-heroicons/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (17)Used By (0)

Simple Blade Heroicons 2.0
==========================

[](#simple-blade-heroicons-20)

[Heroicons](https://heroicons.com/) are a set of icons developed by Steve Schoger and Adam Wathan.

This package is a lightweight alternative to [blade-ui-kit/blade-heroicons](https://github.com/blade-ui-kit/blade-heroicons) in that it simply wraps each SVG in an anonymous Blade component.

This version of the package uses Heroicons 2.

Requirements
------------

[](#requirements)

- PHP 7.3 or higher
- Laravel 7.14 or higher

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

[](#installation)

```
composer require jtolj/simple-blade-heroicons
```

Optionally publish the configuration file:

```
php artisan vendor:publish --tag=simple-blade-heroicons-config
```

Usage
-----

[](#usage)

Icons can be included in Blade templates by making use of the anonymous components that have been generated.

You can see a list of available icons at .

For the 24x24 outline version, prefix the name with `o-`.

For the 24x24 solid fill version, prefix the name with `s-`.

For the 20x20 mini-solid version, prefix the name with `ms-`.

For the 20x20 micro-solid version, prefix the name with `mis-`.

```

```

### Attributes

[](#attributes)

All attributes are passed through to the SVG tag.

For example:

```

```

Would render in the browser as:

```

```

### Dynamic Component

[](#dynamic-component)

A dynamic icon component is also available. The icon name can be be passed through the "icon" property.

For example:

```
@php
  $iconName = 'o-arrow-up';
@endphp

```

### `` support

[](#use-hrefid-support)

This version of the package supports using references to the icon instead of outputting the full content of the SVG each time a component is used in Blade.

This results in a significantly lighter DOM when the same icon is used repeatedly on a page.

To use this feature, first add the following to your `layout.blade.php` **just before your closing `` tag**:

```

    ...contents...

```

You may then either update the 'use\_references' configuration option to true to default to references, or set the `push-ref` property to `true` when rendering an icon.

```

```

### JavaScript Frameworks

[](#javascript-frameworks)

To use the icons in this package with JavaScript frameworks, set up the `` component as described above.

Next, pass a list of icons into the provided `` component. This must appear *before* `` in your template.

The icons you list will become available to reference inside your JavaScript components.

A simple Vue.js example:

```

...

```

```
// Heroicon.vue

export default {
  props: {
    icon: String
  },
  computed: {
    fill() {
      return this.icon.startsWith('o') ? 'none' : 'currentColor';
    },
    stroke() {
      return this.icon.startsWith('o') ? 'currentColor' : null;
    },
    strokeWidth() {
      return this.icon.startsWith('o') ? '1.5' : null;
    },
    reference() {
      return '#heroicon-' + this.icon;
    },
    viewBox() {
      if (this.icon.startsWith('mi')) {
        return '0 0 16 16';
      } elseif (this.icon.startsWith('m')) {
        return '0 0 20 20';
      } else {
        return '0 0 24 24';
      }
    },
  }
}

```

```
// MyComponent.vue
import Heroicon from './Heroicon.vue';

export default {
  components: {
    Heroicon
  }
}

```

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance43

Moderate activity, may be stable

Popularity36

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity62

Established project with proven stability

 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.

###  Release Activity

Cadence

Every ~112 days

Total

15

Last Release

452d ago

Major Versions

v1.0.6 → v2.0.02022-09-05

PHP version history (3 changes)v1.0.0PHP ^7.3|^8.0

v2.0.14PHP ^7.3|^8.0|^8.1

v2.1.1PHP >=7.4

### Community

Maintainers

![](https://www.gravatar.com/avatar/4ec7e09e9e5d0e61deb31221a107a83612261e575f801c590e75f43d10595ea2?d=identicon)[jtolj](/maintainers/jtolj)

---

Top Contributors

[![jtolj](https://avatars.githubusercontent.com/u/845525?v=4)](https://github.com/jtolj "jtolj (30 commits)")

---

Tags

laravelbladeHeroicons

### Embed Badge

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

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

###  Alternatives

[blade-ui-kit/blade-heroicons

A package to easily make use of Heroicons in your Laravel Blade views.

64227.9M111](/packages/blade-ui-kit-blade-heroicons)[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[technikermathe/blade-lucide-icons

A package to easily make use of Lucide icons in your Laravel Blade views.

18299.2k7](/packages/technikermathe-blade-lucide-icons)[stijnvanouplines/blade-country-flags

A package to easily make use of country flags in your Laravel Blade views.

26307.2k6](/packages/stijnvanouplines-blade-country-flags)[saade/blade-iconsax

A package to easily make use of Iconsax in your Laravel Blade views.

21138.5k](/packages/saade-blade-iconsax)[mckenziearts/blade-untitledui-icons

A package to easily make use of UntitledUI icons in your Laravel Blade views.

16104.9k5](/packages/mckenziearts-blade-untitledui-icons)

PHPackages © 2026

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