Symfony UX 's Icons polish your projects to a Professional and Authoritative sheen

Using icons in your site's design is important for tech sites' UX. It helps your design stand out and look more professional and technical. Now there's an easy way to add them.

Symfony UX is one of the best things about Symfony, IMHO. And as usual, their latest effort is a fantastic addition. It is Icons, which I love.

So, here's a quick lesson.

Symfony says it "new Icons can let you render SVG icons seamlessly from your Twig templates. The symfony/ux-icons package offers simple and intuitive ways to add SVG icons in your Symfony application. It provides a Twig function to include any local or remote icons from your templates. And it let's you find the perfect icon among 200,000 choices from the most popular icon sets."

If you follow us you know I recently moved my Mobile Atom Code site to Grav CMS from Drupal. And one of the biggest reasons was so I could work with Twig more easily. Writing in markdown was also a bonus.

So I am very excited that Symfony UX now has an icon implementation for Twig templates! It's because I can use them in M.A.C.'s UI templates and in its articles via SVGs pasted into markdown.

Icons is technically a bundle.

It provides a variety of popular icon libraries:

• Bootstrap (yuck)
• Box Icons
• Flowbite Icons
• Iconoir
• Lucide (attractive)
• Tabler Icons
• Octicons (distinctive)
• Phosphor
• Hero Icons (solid)

Plus many more options are available.

How to import Icons' icons

Symfony says "Icons provides a way to include any icon on-demand:

1. Visit ux.symfony.com/icons and search for an icon you'd like to use. Once you find one you like, copy one of the code snippets provided.
2. Paste the snippet into your Twig template and the icon will be automatically fetched (and cached).

That's all. This works by using the Iconify API (to which Icons is a frontend for) to fetch the icon and render it in place. This icon is then cached for future requests for the same icon."

It can be that simple.

If you want to do things by the command line you will need to install the bundle first of course.

composer require symfony/ux-icons

Note: to search and download icons via ux.symfony.com/icons, the symfony/http-client package must be installed in your application:

composer require symfony/http-client

Copy and paste Icons' icons

If your platform doesn't allow that, you can also copy and paste the SVG code. For example, inside the body of an article like this is a good use case for the SVG option. As I am sure you have noticed.

As you probably know and Symfony says: "SVG (Scalable Vector Graphics) is an XML-based vector image format, allowing resolution-independent graphics while maintaining a small file size. SVG icons can be embedded in the HTML code, styled with CSS, and animated with JavaScript."

So, they are awesome.

Get more info on Icons mojo

And you can also see the metadata including the author, repository, and license via the link above.





That's it. Symfony UX Icons are very simple and that's why I like them. It's not a complicated integration you have to spend a lot of time mastering. Which is mostly true of the entirety of Symfony UX.

I can't find any SymfonyCast on icons yet, but I am sure there is one on the way. Here are the bundle docs if you want to see all the technical details in order to implement and customize Icons.

So, take advantage of this useful new functionality from Symfony to make your projects more authoritative and shine with professionalism.

Cheers and happy coding Symfonistas. Sorry for going crazy with the icons. That's definitely not professional. Here's an emoji. 😉

Author

Reuben Walker