ux-icons

Solid

Symfony UX Icons for rendering SVG icons in Twig templates. Supports 200,000+ Iconify icons (Lucide, Heroicons, Tabler, Material Design, etc.), local SVG files, and custom icon sets with aliases. Use when displaying icons, configuring icon defaults, importing or locking on-demand icons, creating icon aliases, or styling SVG icons with CSS. Code triggers: <twig:ux:icon />, ux_icon(), UX_ICONS_DEFAULT_ICON_ATTRIBUTES, icon.yaml, icons/, iconify:, lucide:, heroicons:, tabler:, mdi:, bin/console ux:icons:lock, bin/console ux:icons:import. Also trigger when the user asks "how to add an icon", "how to use Lucide/Heroicons/Tabler icons", "how to render an SVG icon in Twig", "how to lock icons for production", "how to create icon aliases", "how to style an icon", "icon not found", "icon not rendering". Do NOT trigger for interactive maps (use ux-map) or general Twig components (use twig-component).

Web & Frontend 158 stars 11 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 90/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# UX Icons Render local and remote SVG icons in Twig templates. Icons can come from local files, Iconify.design (200+ icon sets, 200,000+ icons), or custom icon sets. Icons are inlined as `<svg>` elements -- no icon fonts, no external requests at runtime. ## Installation ```bash composer require symfony/ux-icons ``` ## Quick Reference ``` ux_icon('name') Twig function ux_icon('name', {class: 'w-4 h-4'}) with HTML attributes <twig:ux:icon name="name" /> Twig component (requires ux-twig-component) <twig:ux:icon name="set:name" /> icon from a specific set ``` ## Rendering Icons ### Twig Function ```twig {{ ux_icon('menu') }} {# renders <svg ...>...</svg> #} {{ ux_icon('user-profile', {class: 'w-4 h-4'}) }} {# renders <svg class="w-4 h-4"> ... </svg> #} {{ ux_icon('user-profile', {height: '16px', width: '16px', 'aria-hidden': true}) }} {# renders <svg height="16" width="16" aria-hidden="true"> ... </svg> #} ``` ### Twig Component (HTML Syntax) Requires `symfony/ux-twig-component`. ```html <twig:ux:icon name="user-profile" class="w-4 h-4" /> <twig:ux:icon name="flowbite:user-solid" /> <twig:ux:icon name="user-profile" height="16" width="16" aria-hidden="true" /> ``` Any HTML attribute added to the component or passed to the function is rendered on the `<svg>` element. ## Icon Names ### Local Icons Stored in `assets/icons/` by default. The file path (minus `.svg`) becomes the icon name: ``` assets/icons/ ├─ close.svg ...