Icons

Setup

Icons are included in manifest.js with all core plugins, or can be selectively loaded.

<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"
    data-plugins="icons"></script>

Manifest makes icons easy, providing access to over 200,000 open source icons from every major library, courtesy of Iconify. Iconify's lightweight script is bundled into the above Manifest scripts.

Usage

Icons are inserted into any HTML element with the x-icon attributes.

<i x-icon="lucide:house"></i>

Browse the Iconify library for available icon values like the lucide:house example above. The letters before the colon are the icon library code (e.g. lucide), and the string after is the individual icon name (e.g. house). If an icon doesn't render, double check the value.

Inline Icons

When an icon renders, a child SVG is generated at runtime within the parent element. This overwrites any other children of the parent element. To preserve children, place the x-icon attribute in its own child element like a <span> or <i> tag.

<h3><i x-icon="lucide:house"></i> Lorem ipsum.</h3>
<button><span x-icon="lucide:house"></span> Home</button>

Dynamic Icons

Icons can be switched dynamically with Alpine expressions. Click the example button to swap icons.

<div x-data="{ icon: 'lucide:house' }">
    <button @click="icon = icon === 'lucide:house' ? 'lucide:building' : 'lucide:house'" aria-label="Toggle" x-icon="icon"></button>
</div>

Collection Icons

x-icon can get its value from a data source.

<span x-icon="$x.example.icon"></span>

{
    "icon": "lucide:aperture"
}

Styles

Icons are treated like text and inherit parent text properties like font-size and color.

Certain elements like buttons have unique styles to ensure icons always appear nicely inline, on their own, or alongside text.