Components Heroicons (old)

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Heroicons (old)

Petal Components 2.0+ now work with Core Components

Click here for the latest documentation

Petal Components 1.9.3 and older

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.

Icon (Heroicons v2)

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

heex 
          <.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
elixir 
            # <.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)
heex 
          <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)
heex 
          <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" />