Components Heroicons


The makers of Tailwind CSS have created a libary of 230 beatiful hand-crafted SVG icons and we have made it incredibly simple for you to use them. Search the full list of these icons here.

To use Heroicons, please follow the docs of heroicons_elixir (this library comes automatically loaded with Petal Components) or use our icon component below for a dynamic icon.

We renamed Heroicons
As of v0.18, we have renamed Heroicons to HeroiconsV1.

To use Heroicons v2, use this library:
Icon (Heroicons v2)

The Heroicons Hex library doesn't allow you to dynamically create an icon. This component rectifies that.

          <.icon name={:home} class="h-10 text-gray-700 dark:text-gray-300"/>
<.icon name={:academic_cap} class="h-10 text-pink-700 dark:text-pink-300"/>
<.icon name={:adjustments_horizontal} class="h-10 text-green-700 dark:text-green-300"/>


Defaults are indicated in bold. Required fields have * before the label. Hover over the name for docs.

Name Type Options/Default
name :atom -
outline :boolean -
solid :boolean -
mini :boolean -
[all additional properties] Forwarded to the Heroicon function component. Can include fill, stroke, stroke-width
Solid (v1)
          <HeroiconsV1.Solid.home />
<HeroiconsV1.Solid.academic_cap class="w-6 h-6 text-primary-500" />
<HeroiconsV1.Solid.chart_pie class="w-6 h-6 rotate-90 text-secondary-500" />

Outline (v1)
          <HeroiconsV1.Outline.home />
<HeroiconsV1.Outline.academic_cap class="w-6 h-6 text-primary-500" />
<HeroiconsV1.Outline.chart_pie class="w-6 h-6 rotate-90 text-secondary-500" />