Icons

Icons can be implemented as simple CSS classes, to which you can then apply regular tailwind classes to (hover the icons to see it in action).

We use the UnoCSS Icons preset for our icons, which gives you access to all iconify icons as CSS classes. Here’s a quick start, but head over to the official documentation to see how it works.

pnpm add -D @unocss/preset-icons

You can then simply install icon collections like so:

pnpm add -D @iconify-json/[the-collection-you-want]

For example, if you want to get the material-symbols icons:

pnpm add -D @iconify-json/material-symbols

I would recommend using icones to search for icons. When you’re there, change the naming convention of copied icon classes to the UnoCSS naming convention, which starts with an i- prefix: