Icons

We use Iconify with the Tailwind CSS plugin to rendering icons. This allows you to use any icon set available on Iconify with a simple class name.

Installation

If you followed the Manual Installation guide, you should already have the necessary packages installed. If not, install them now:

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

Then add the plugin to your globals.css (or wherever you import Tailwind):

@import "tailwindcss";
@plugin "@iconify/tailwind4";

Usage

You can use any icon from the material-symbols collection by using the icon-[set--name] class syntax.

<i className="icon-[material-symbols--home-outline-rounded]" />
<i className="icon-[material-symbols--search-rounded]" />
<i className="icon-[material-symbols--settings-outline-rounded]" />

You can control the size and color of the icon using standard Tailwind utility classes.

<i className="icon-[material-symbols--favorite-rounded] text-error size-6" />
<i className="icon-[material-symbols--info-outline-rounded] text-primary h-8 w-8" />

Finding Icons

You can browse the full collection of Material Symbols on the Iconify website.