One component.
Seven+ icon libraries.

Icon library for Phoenix LiveView that scans your templates at compile time, downloads only the icons you actually use, and inlines the SVGs as compiled function clauses. Zero runtime overhead, no unused icons bundled, no Node.js required.

Installation

Three steps, without any JavaScript tooling.

1. 1

   Add the dependency

   mix.exs

   defp deps do
     [{:phx_icons, "~> 0.3.0"}]
   end

2. 2

   Pick your providers

   config.exs

   config :phx_icons,
     providers: %{
       "heroicons" => {PhxIcons.Providers.Heroicons, "2.2.0"},
       "lucide" => {PhxIcons.Providers.Lucide, "0.469.0"}
     }

3. 3

   Hook it into your components

   core_components.ex

   defmodule MyAppWeb.CoreComponents do
     use Phoenix.Component
     use PhxIcons
   end

Providers

Prefix the icon name with the provider.

Sizing & color

Icons inherit currentColor, so you size and tint them with plain Tailwind utilities.

Animations

Because the SVG is inlined, Tailwind's transition and animation utilities apply to it directly.

Pre-downloading icons

You can also pre-download all icons from a provider, a specific list, or extra icons in addition to the icons discovered in your codebase.

config :phx_icons,
  providers: %{
    # Download all icons upfront
    "heroicons" => {PhxIcons.Providers.Heroicons, "2.2.0", download: :all},
    # Download a specific set
    "lucide" => {PhxIcons.Providers.Lucide, "0.469.0", download: ~w(search check x)},
    # Download discovered icons plus these extra icons
    "tabler" => {PhxIcons.Providers.Tabler, "3.41.1", download: {:also, ~w(settings user)}}
  }

Custom providers

Implement the PhxIcons.Provider behaviour.

defmodule MyApp.Providers.CustomIcons do
  @behaviour PhxIcons.Provider

  @impl true
  def release_url(version) do
    "https://github.com/org/repo/archive/refs/tags/v#{version}.zip"
  end

  @impl true
  def svg_path(version, icon_name, _opts) do
    "repo-#{version}/icons/#{icon_name}.svg"
  end
end

Optionally implement transform/1 to rewrite each SVG before it's stored, e.g. replacing hardcoded fills with currentColor. This is how the built-in Reicon provider does it:

@impl true
def transform(svg) do
  String.replace(svg, ~s(fill="#000000"), ~s(fill="currentColor"))
end

Then register it in your config.

config :phx_icons,
  providers: %{
    "custom" => {MyApp.Providers.CustomIcons, "1.0.0"}
  }

Testing

PhxIcons ships with test helpers to assert icons are rendered.

import PhxIcons.Test

html = render_component(&MyAppWeb.CoreComponents.icon/1, name: "heroicons:heart")
assert_icon(html, "heroicons:heart")
refute_icon(html, "heroicons:x-mark")