PhxIcons

Dynamic icon library for Phoenix LiveView. Use icons from multiple providers — they're automatically discovered from your templates, downloaded, and inlined as SVG at compile time.

Installation

# mix.exsdefp deps do  [{:phx_icons, "~> 0.1.0"}]end
# config/config.exsconfig :phx_icons,  providers: %{    "heroicons" => {PhxIcons.Providers.Heroicons, "2.2.0"},    "lucide" => {PhxIcons.Providers.Lucide, "0.469.0"}  }
# lib/my_app_web/components/core_components.exdefmodule MyAppWeb.CoreComponents do  use Phoenix.Component  use PhxIconsend

Heroicons

Beautiful hand-crafted SVG icons by the makers of Tailwind CSS.

Outline

heart
bell
check
arrow-left
<.icon name="heroicons:heart" class="size-6" /><.icon name="heroicons:bell" class="size-6" /><.icon name="heroicons:check" class="size-6" /><.icon name="heroicons:arrow-left" class="size-6" />

Mini

heart
bell
check
arrow-left 
<.icon name="heroicons-mini:heart" class="size-5" /><.icon name="heroicons-mini:bell" class="size-5" /><.icon name="heroicons-mini:check" class="size-5" /><.icon name="heroicons-mini:arrow-left" class="size-5" />

Lucide

Community-driven fork of Feather Icons. Clean, consistent stroke icons.

heart
bell
check
arrow-left
<.icon name="lucide:heart" class="size-6" /><.icon name="lucide:bell" class="size-6" /><.icon name="lucide:check" class="size-6" /><.icon name="lucide:arrow-left" class="size-6" />

Tabler

Over 5,400 free icons with outline and filled styles.

heart
bell
check
arrow-left
<.icon name="tabler:heart" class="size-6" /><.icon name="tabler:bell" class="size-6" /><.icon name="tabler:check" class="size-6" /><.icon name="tabler:arrow-left" class="size-6" />

Phosphor

Flexible icon family with 6 weights: thin, light, regular, bold, fill, and duotone.

Regular

heart
bell
check
arrow-left
<.icon name="phosphor:heart" class="size-6" /><.icon name="phosphor:bell" class="size-6" /><.icon name="phosphor:check" class="size-6" /><.icon name="phosphor:arrow-left" class="size-6" />

Duotone

heart-duotone
bell-duotone
check-duotone
arrow-left-duotone 
<.icon name="phosphor:heart-duotone" class="size-6" /><.icon name="phosphor:bell-duotone" class="size-6" /><.icon name="phosphor:check-duotone" class="size-6" /><.icon name="phosphor:arrow-left-duotone" class="size-6" />

Simple Icons

Free SVG icons for popular brands. Over 3,000 logos.

GitHubgithub
Elixirelixir
Dockerdocker
Tailwind CSS tailwindcss 
<.icon name="simple-icons:github" class="size-6 fill-current" /><.icon name="simple-icons:elixir" class="size-6 fill-current" /><.icon name="simple-icons:docker" class="size-6 fill-current" /><.icon name="simple-icons:tailwindcss" class="size-6 fill-current" />

Flagpack

Beautiful open-source flag icons. 250+ country flags as SVG.

us
gb
de
at
<.icon name="flagpack:us" class="h-6 w-auto" /><!-- "gb" is an alias for "gb-ukm", configured via aliases: %{"gb" => "gb-ukm"} --><.icon name="flagpack:gb" class="h-6 w-auto" /><.icon name="flagpack:de" class="h-6 w-auto" /><.icon name="flagpack:at" class="h-6 w-auto" />

Sizes

size-4
size-6
size-8
size-12 
<.icon name="heroicons:heart" class="size-4" /><.icon name="heroicons:heart" class="size-6" /><.icon name="heroicons:heart" class="size-8" /><.icon name="heroicons:heart" class="size-12" />

Colors

<.icon name="lucide:heart" class="size-8 text-red-500" /><.icon name="lucide:star" class="size-8 text-yellow-500" /><.icon name="tabler:rocket" class="size-8 text-green-500" /><.icon name="phosphor:lightning" class="size-8 text-purple-500" />

Animations

scale + color
ping
spin
pulse 
<.icon name="heroicons:heart" class="size-8 hover:text-red-500 hover:scale-125 transition-all" /><.icon name="lucide:bell" class="size-8 hover:animate-ping" /><.icon name="tabler:star" class="size-8 hover:animate-spin hover:text-yellow-500" /><.icon name="phosphor:arrow-left" class="size-8 hover:animate-pulse hover:text-blue-500" />