PhxIcons – dynamic icon library for Phoenix LiveView

Hey,

I saw @woylie’s ExIcon post a few days ago and it finally pushed me to build something I’ve been wanting for a while. Full disclosure: I shamelessly stole the idea — if it makes sense to join forces at some point, I’d be totally up for that!

At Tagbase we have an umbrella app with multiple web apps, and we use different icon sets for different things: Heroicons for UI, Lineicons for brand logos, Flagpack for country flags. We had custom Mix tasks to download and process them, separate Tailwind plugins to render them as CSS masks, and multiple Git dependencies to keep in sync. It worked, but it was getting cumbersome.

PhxIcons takes a different approach: it 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 custom build steps. If an icon doesn’t exist in your templates, it’s never downloaded.

The library is completely vibe-coded, so bear with me if things are rough around the edges.

# In your component module
defmodule MyAppWeb.CoreComponents do
  use Phoenix.Component
  use PhxIcons
end

# In templates
<.icon name="heroicons:heart" class="size-6 text-red-500" />
<.icon name="lucide:search" class="size-4" />
<.icon name="flagpack:at" class="size-8" />

Currently supported providers: Heroicons, Lucide, Tabler, Phosphor, Simple Icons, Flagpack, and Lineicons. Adding new ones is straightforward via a behaviour.

A nice side effect: our CI got noticeably faster after the switch, probably because we no longer need Node.js for icon processing, and Node on GitHub runners is not exactly speedy.

Check out the demo to see all providers in action.

v0.1.0 is on Hex

https://github.com/ream88/phx_icons

Would love feedback — try it out and let me know what you think!

EDIT: Another notable inspiration: phoenix_iconify | Hex