Phoenix Storybook

Icon

Renders a Heroicon.

Read more Read less

Heroicons come in three styles – outline, solid, and mini. By default, the outline style is used, but solid and mini may be applied by using the -solid and -mini suffix.

You can customize the size and colors of the icons by setting width, height, and background color classes.

Icons are extracted from the deps/heroicons directory and bundled within your compiled app.css by the plugin in your assets/tailwind.config.js.

Examples

<.icon name="hero-x-mark-solid" />
<.icon name="hero-arrow-path" class="ml-1 w-3 h-3 motion-safe:animate-spin" />
Sizes Open in playground 
<.icon name="hero-book-open" class="dark:text-zinc-300"/>
<.icon name="hero-book-open-solid" class="dark:text-zinc-300"/>
<.icon name="hero-book-open-mini" class="dark:text-zinc-300"/>
<.icon name="hero-book-open-micro" class="dark:text-zinc-300"/>
Colors Open in playground 
<.icon name="hero-academic-cap" class="text-indigo-400"/>
<.icon name="hero-academic-cap" class="text-pink-400"/>
<.icon name="hero-academic-cap" class="text-teal-400"/>
<.icon name="hero-academic-cap" class="text-amber-400"/>
Motion Open in playground 
<.icon name="hero-arrow-path" class="motion-safe:animate-spin dark:text-zinc-300"/>
<.icon
  name="hero-arrow-down-circle"
  class="motion-safe:animate-bounce dark:text-zinc-300"
/>
<.icon
  name="hero-information-circle"
  class="motion-safe:animate-pulse dark:text-zinc-300"
/>
<.icon
  name="hero-arrows-pointing-out"
  class="motion-safe:animate-ping dark:text-zinc-300"
/>