README

Renders local and remote SVG icons in your Contao Twig templates. Adds a icon picker widget to Contao.

Install

Install via Composer or Contao Manager.

composer require pdir/contao-ux-icons-bundle

Usage

{# In your Contao Twig template #}
{{ ux_icon('bi:cart') }}
{{ ux_icon('tdesign:cart-filled') }}
{{ ux_icon('bx:cart') }}
{{ ux_icon('fa-solid:shopping-cart') }}

{{ ux_icon('bi:cart', {style: 'height: 1em;'}) }}
{{ ux_icon('bi:cart', {class: 'size-4'}) }}

{# Example #}
{{ ux_icon('mdi:check', {class: 'w-4 h-4'}) }}

{# Render the "check" icon from "mdi" pack with class #}
<svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
    <path d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"/>
</svg>

Icon Sets

Some of the most popular icon sets are shown below; for the complete list, visit https://ux.symfony.com/icons.

Icon Set	Icons	License	Prefix	Example
Bootstrap Icons	2000	MIT	bi	bi:check
Boxicons	1700	MIT	bx	bx:check
Flowbite	1000	MIT	flowbite	flowbite:check
FontAwesome Icons	7000	CC BY 4.0	fa6-regular	fa6-regular:check
Heroicons	300	MIT	heroicons	heroicons:check
Iconoir	1500	MIT	iconoir	iconoir:check
Ionicons	1300	MIT	ion	ion:check
Lucide Icons	1500	MIT	lucide	lucide:check
Material Design Icons	5000	Apache 2	mdi	mdi:check
Octicons	600	MIT	octicon	octicon:check
Phosphor Icons	7000	MIT	ph	ph:check
Tabler Icons	5200	MIT	tabler	tabler:check

Accessibility

{# Informative icons #}
Today's weather:
{{ ux_icon('cloud-rain', {'aria-label': 'Rainy weather'}) }}

{# Functional icons #}
{{ ux_icon('user-profile', {class: 'w-4 h-4', 'aria-label': 'User Profile'}) }}

Credits

UX Icons on Github https://github.com/symfony/ux-icons UX Icons Documentation https://symfony.com/bundles/ux-icons/current/index.html

DEV

First make sure the tools are installed and up to date by running composer bin all update in your bundle's root. Then run the PHP-CS-Fixer and the unit test before you release your bundle:

vendor/bin/ecs check src/ tests/ --fix
vendor/bin/phpunit

pdir / contao-ux-icons-bundle

Maintainers

Details