{"id":51355370,"url":"https://github.com/elixir-volt/phoenix_iconify","last_synced_at":"2026-07-02T19:11:02.853Z","repository":{"id":340651043,"uuid":"1166986377","full_name":"elixir-volt/phoenix_iconify","owner":"elixir-volt","description":"Phoenix components for compile-time discovered Iconify SVG icons","archived":false,"fork":false,"pushed_at":"2026-05-20T22:05:41.000Z","size":45,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-05-21T02:14:19.269Z","etag":null,"topics":["compile-time","components","elixir","iconify","icons","liveview","phoenix"],"latest_commit_sha":null,"homepage":null,"language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elixir-volt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-25T20:31:47.000Z","updated_at":"2026-05-20T22:47:26.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/elixir-volt/phoenix_iconify","commit_stats":null,"previous_names":["dannote/phoenix_iconify","elixir-volt/phoenix_iconify"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/elixir-volt/phoenix_iconify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elixir-volt%2Fphoenix_iconify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elixir-volt%2Fphoenix_iconify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elixir-volt%2Fphoenix_iconify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elixir-volt%2Fphoenix_iconify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elixir-volt","download_url":"https://codeload.github.com/elixir-volt/phoenix_iconify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elixir-volt%2Fphoenix_iconify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35059465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-02T02:00:06.368Z","response_time":173,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compile-time","components","elixir","iconify","icons","liveview","phoenix"],"created_at":"2026-07-02T19:11:02.086Z","updated_at":"2026-07-02T19:11:02.831Z","avatar_url":"https://github.com/elixir-volt.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PhoenixIconify\n\n[![Hex.pm](https://img.shields.io/hexpm/v/phoenix_iconify.svg)](https://hex.pm/packages/phoenix_iconify) [![Documentation](https://img.shields.io/badge/documentation-gray)](https://hexdocs.pm/phoenix_iconify)\n\nInline [Iconify](https://iconify.design) SVGs for Phoenix and LiveView. Write a normal Phoenix component, let the compiler discover the icons you use, and ship only those icons with your app.\n\n```heex\n\u003c.icon name=\"lucide:settings\" class=\"size-5\" /\u003e\n```\n\nPhoenixIconify gives Phoenix apps access to 200,000+ icons from 150+ icon sets without a client-side icon runtime. Browse icons at [icon-sets.iconify.design](https://icon-sets.iconify.design).\n\n## Why PhoenixIconify\n\nMost Iconify integrations load icons in JavaScript. PhoenixIconify keeps icons on the server:\n\n- Icons are discovered from HEEx at compile time\n- Only icons you use are fetched and stored\n- Rendering is plain inline SVG\n- SVG IDs are rewritten to avoid duplicate gradient/mask collisions\n- No browser-side icon loader\n- Works with LiveView diffs and `phx-*` attributes\n- Dynamic icons can be pre-registered in config\n\nIt pairs naturally with Tailwind and Volt-powered Phoenix projects:\n\n```heex\n\u003cbutton class=\"inline-flex items-center gap-2\"\u003e\n  \u003c.icon name=\"lucide:settings\" class=\"size-4\" /\u003e\n  Settings\n\u003c/button\u003e\n```\n\n## Installation\n\nAdd the dependency:\n\n```elixir\ndef deps do\n  [\n    {:phoenix_iconify, \"~\u003e 0.3.2\"}\n  ]\nend\n```\n\nAdd the compiler:\n\n```elixir\ndef project do\n  [\n    compilers: Mix.compilers() ++ [:phoenix_iconify]\n  ]\nend\n```\n\nImport the component in your web module:\n\n```elixir\n# lib/my_app_web.ex\ndefp html_helpers do\n  quote do\n    import PhoenixIconify, only: [icon: 1]\n  end\nend\n```\n\nNow use icons in HEEx:\n\n```heex\n\u003c.icon name=\"lucide:settings\" class=\"size-5\" /\u003e\n```\n\n## Usage\n\nUse Iconify's standard `prefix:name` format:\n\n```heex\n\u003c.icon name=\"lucide:home\" class=\"size-5\" /\u003e\n\u003c.icon name=\"mdi:account\" class=\"size-6 text-blue-600\" /\u003e\n\u003c.icon name=\"heroicons:check\" class=\"size-4\" /\u003e\n```\n\nPhoenix-style Heroicons names are supported too:\n\n```heex\n\u003c.icon name=\"hero-user\" class=\"size-6\" /\u003e\n\u003c.icon name=\"hero-sun-mini\" class=\"size-5\" /\u003e\n\u003c.icon name=\"hero-sun-micro\" class=\"size-4\" /\u003e\n```\n\nGlobal attributes are forwarded to the SVG, including `phx-*`, `data-*`, and `aria-*`:\n\n```heex\n\u003c.icon name=\"lucide:x\" class=\"size-4\" phx-click=\"close\" data-testid=\"close\" /\u003e\n```\n\nUse `color` for currentColor icon sets and `inline` when an icon should align with text:\n\n```heex\n\u003cspan\u003e\n  Saved \u003c.icon name=\"lucide:check\" color=\"green\" inline /\u003e\n\u003c/span\u003e\n```\n\n## Accessibility\n\nIcons are decorative by default and render with `aria-hidden=\"true\"`:\n\n```heex\n\u003c.icon name=\"lucide:settings\" class=\"size-5\" /\u003e\n```\n\nFor meaningful icons, provide `label` or `title`:\n\n```heex\n\u003c.icon name=\"lucide:settings\" label=\"Settings\" /\u003e\n\u003c.icon name=\"lucide:settings\" title=\"Settings\" /\u003e\n```\n\n## Sizing\n\nUse Tailwind's `size-*` utilities when possible:\n\n```heex\n\u003c.icon name=\"lucide:settings\" class=\"size-5\" /\u003e\n```\n\nPhoenixIconify follows Iconify's dimension behavior. Icons default to `1em` high and preserve their aspect ratio. Set one dimension and the other is calculated from the viewBox:\n\n```heex\n\u003c.icon name=\"lucide:settings\" size=\"20\" /\u003e\n\u003c.icon name=\"lucide:settings\" height=\"1em\" /\u003e\n\u003c.icon name=\"lucide:settings\" width=\"unset\" /\u003e\n```\n\n## Transformations and render modes\n\nIconify aliases can include transformations, and you can transform at render time:\n\n```heex\n\u003c.icon name=\"lucide:arrow-right\" rotate={1} /\u003e\n\u003c.icon name=\"lucide:arrow-right\" flip=\"horizontal\" /\u003e\n\u003c.icon name=\"lucide:arrow-right\" h_flip /\u003e\n\u003c.icon name=\"lucide:arrow-right\" v_flip /\u003e\n```\n\nSVG mode is the default. CSS mask/background modes are available for Iconify-style CSS rendering:\n\n```heex\n\u003c.icon name=\"lucide:settings\" mode=\"mask\" class=\"size-5\" /\u003e\n\u003c.icon name=\"logos:elixir\" mode=\"bg\" class=\"size-5\" /\u003e\n```\n\nSVG IDs are replaced automatically, so icons with gradients, masks, clip paths, or animation references can be rendered multiple times on the same page.\n\n## How it works\n\n1. You write `\u003c.icon name=\"lucide:settings\" /\u003e`\n2. The `:phoenix_iconify` compiler scans HEEx and `~H` sigils\n3. Literal icon names are collected\n4. Missing icons are fetched through Iconify\n5. A JSON manifest is written to `priv/iconify/manifest.json`\n6. At runtime, the component reads icons from the manifest and renders inline SVG\n\nThere is no client-side icon runtime and no JavaScript bundle impact.\n\n## Dynamic icons\n\nCompile-time discovery only works for literal names. If an icon name comes from assigns, a database, or user configuration, register the possible values:\n\n```elixir\n# config/config.exs\nconfig :phoenix_iconify,\n  extra_icons: [\n    \"lucide:check\",\n    \"lucide:x\",\n    \"lucide:alert-triangle\"\n  ]\n```\n\nThen dynamic usage works at runtime:\n\n```heex\n\u003c.icon name={@status_icon} class=\"size-4\" /\u003e\n```\n\n## Configuration\n\n```elixir\nconfig :phoenix_iconify,\n  extra_icons: [\"lucide:check\", \"lucide:x\"],\n  fallback: \"lucide:circle-help\",\n  warn_on_missing: true\n```\n\nOptions:\n\n- `:extra_icons` - icons to include even when they are not found by static discovery\n- `:source_globs` - source globs to scan for literal icon usage. Defaults include Phoenix HEEx files and Astral `pages/**/*.astral`, `components/**/*.astral`, `layouts/**/*.astral`, and `content/**/*.md`.\n- `:fallback` - icon to render when a requested icon is missing\n- `:warn_on_missing` - log missing icon warnings, enabled by default\n\n## Cache and manifest\n\nPhoenixIconify stores:\n\n- `priv/iconify/manifest.json` - icons used by your app\n- `priv/iconify/sets/*.json` - cached icon sets\n\nUseful tasks:\n\n```bash\nmix phoenix_iconify.prefetch  # scan and fetch discovered icons\nmix phoenix_iconify.audit     # report discovered icons missing from the manifest\nmix phoenix_iconify.clean     # remove manifest icons no longer used\nmix phoenix_iconify.list      # list manifest icons\nmix phoenix_iconify.stats     # show manifest and cache stats\n```\n\nCache tasks:\n\n```bash\nmix phoenix_iconify.cache fetch\nmix phoenix_iconify.cache list\nmix phoenix_iconify.cache clear\n```\n\n## Volt projects\n\nFor projects created with [Volt](https://hex.pm/packages/volt), PhoenixIconify is the server-rendered option:\n\n```heex\n\u003c.icon name=\"lucide:settings\" class=\"size-5\" /\u003e\n```\n\nIt does not use Volt's JavaScript pipeline. If you want client-side icon components instead, use the official npm packages (`iconify-icon`, `@iconify/react`, `@iconify/vue`, etc.) through Volt's normal package handling.\n\n## Part of Elixir Volt\n\nphoenix_iconify ships compile-time discovered, server-rendered Iconify SVGs for Phoenix — 200,000+ icons, zero client runtime.\n\nIt is part of a frontend stack that runs inside the BEAM — builds, JS\nruntimes, icons, and Vue-to-LiveView compilation as supervised parts of the\napplication instead of external toolchain processes. See the\n[Elixir Volt](https://github.com/elixir-volt) organization for the rest, and\n[Building Blocks for the Future Web](https://github.com/elixir-vibe/building-blocks)\nfor the thesis, architecture, and roadmap that tie them together.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felixir-volt%2Fphoenix_iconify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felixir-volt%2Fphoenix_iconify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felixir-volt%2Fphoenix_iconify/lists"}