UI icons (SVG icons)

Silicon uses modern SVG-based icons powered by Iconify. Icons are rendered as inline SVGs, ensuring crisp visuals on all screen sizes and full control via Tailwind CSS utility classes.

Icon sets used in the project include Lucide, Tabler, and Material Design Light.

<i class="iconify lucide--anchor size-7"></i>
View full Lucide icon list

Iconify setup (Tailwind CSS 4)

Iconify is integrated using the Tailwind CSS 4 plugin system. The configuration is defined in the main Tailwind entry CSS file:

@plugin "@iconify/tailwind4" {
  prefixes: lucide, tabler;
}

Using icons in your project

  1. Choose an icon from the supported icon sets.
  2. Add the icon using the iconify class and the icon name prefixed with the set name (for example lucide--).
  3. Control size and color using Tailwind utility classes.