Corex.Heroicon (Corex v0.1.0-beta.2)

Renders a Heroicon.

This component requires Tailwind and uses a Tailwind v4 plugin to generate the hero-* utility classes. If you created your app with mix corex.new or phx.new you should have it by default. If not, run:

mix corex.heroicon

That adds the plugin to assets/vendor and instructs adding to your app.css:

@plugin "../vendor/heroicons";

Ensure the :heroicons dependency is in your mix.exs (e.g. {:heroicons, github: "tailwindlabs/heroicons"}).

Summary

Components

heroicon(assigns)

Renders a Heroicon by class name.

Components

heroicon(assigns)

Renders a Heroicon by class name.

Heroicons come in outline, solid, mini, and micro. Use the default (outline), or add -solid, -mini, or -micro to the icon name. Customize size and colors with Tailwind width, height, and color classes.

Examples

<.heroicon name="hero-x-mark" />
<.heroicon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />

Attributes

name (:string) (required)
class (:any) - Defaults to "".
Global attributes are accepted.