Components
Heroicons
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:
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"/>
Properties
# <.icon>
attr :name, :atom, required: true
attr :outline, :boolean, default: true
attr :solid, :boolean, default: false
attr :mini, :boolean, default: false
attr :rest, :global,
doc: "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" />