Usage

Once the package is installed, every Ionicon is available as a self-closing Blade component. This page walks through component naming, styling, the icon variants, and the extra rendering options you inherit from Blade Icons.

Self-closing components

Each icon is a component named with the ionicon prefix followed by the icon name. The pattern is <x-ionicon-{name} />:

<x-ionicon-heart />
<x-ionicon-logo-apple />
<x-ionicon-chevron-forward />

These are compiled to inline SVG, so the result is rendered directly into your HTML — there are no extra requests and no <img> wrapping.

Styling icons

Pass a class attribute to size and color an icon with Tailwind (or your own CSS). Because the SVG uses currentColor, text color utilities flow straight through:

<x-ionicon-logo-apple class="w-6 h-6 text-gray-500" />

You can also use inline styles:

<x-ionicon-logo-apple style="color: #555" />

Both attributes are passed through to the rendered <svg> element, so any attribute you would put on an SVG — id, aria-hidden, role, width, height, and so on — works the same way:

<x-ionicon-heart class="w-5 h-5 text-rose-500" aria-hidden="true" />

Icon name variants

Ionicons ship in three styles plus brand logos. The variant is part of the icon name (and therefore part of the component name):

Here they are side by side:

{{-- Filled, outline, and sharp variants of the same icon --}}
<x-ionicon-heart class="w-6 h-6 text-rose-500" />
<x-ionicon-heart-outline class="w-6 h-6 text-rose-500" />
<x-ionicon-heart-sharp class="w-6 h-6 text-rose-500" />
 
{{-- A brand logo --}}
<x-ionicon-logo-github class="w-6 h-6 text-gray-800" />

Using the Blade Icons directive

Because Blade Ionicons is built on Blade Icons, you can also render any icon with the @svg directive instead of a component. Reference the icon by its prefixed name, ionicon-{name}, and pass classes as the second argument:

@svg('ionicon-heart', 'w-6 h-6 text-rose-500')
@svg('ionicon-logo-github', 'w-6 h-6')

You can pass additional attributes as a third argument:

@svg('ionicon-heart', 'w-6 h-6', ['aria-hidden' => 'true'])

Using the svg() helper

The same icons are available through Blade Icons' svg() helper, which is handy in PHP code or when you want to build the icon fluently:

{{ svg('ionicon-heart', 'w-6 h-6 text-rose-500') }}

// Anywhere in PHP — returns a renderable Svg instance
echo svg('ionicon-logo-github')->class('w-6 h-6');

Using published raw SVG as an asset

If you published the raw SVGs (see Installation), you can reference any icon as a static file under public/vendor/blade-ionicons:

<img src="{{ asset('vendor/blade-ionicons/heart.svg') }}" width="24" height="24" alt="" />

This renders an external image rather than inline SVG, so it will not inherit currentColor. Reach for this only when you specifically need a file on disk; the components and the @svg directive are usually the better choice.

Finding icon names

Component names map directly to the Ionicons name. To find the icon you want:

• Browse and search the full catalog at ionicons.com.
• Look in the package's resources/svg directory — the file name (without .svg) is the icon name. For example, resources/svg/logo-apple.svg becomes <x-ionicon-logo-apple />.

Convert the icon name to a component by prefixing it with ionicon-: an icon named chevron-forward-outline becomes <x-ionicon-chevron-forward-outline />.

All Blade Icons features apply

Everything Blade Icons offers works here, including default classes, default attributes, and a fallback icon for missing names (all configurable — see Configuration). For the complete feature surface, refer to the Blade Icons documentation.

Next steps

Customize the defaults — the prefix, default classes, default attributes, and the fallback icon — in Configuration.