Rokkit uses semantic icon names that you map to actual icon classes in your UnoCSS configuration. This lets you swap icon sets project-wide without changing component code.
Global Icon Mapping
Define your icon mapping in your uno.config.js using the Rokkit theme helper.
Components reference icons by semantic name (e.g., expand, check),
and you decide which actual icon to use:
javascript
Highlighting code...
Semantic Icon Names
Components use these semantic names internally. Map each to your preferred icon:
| Name | Used By | Purpose |
|---|---|---|
expand | Select, Tree, List | Expand/open indicator |
collapse | Select, Tree, List | Collapse/close indicator |
check | MultiSelect, Toggle | Selected/checked state |
close | Menu, Select | Close/dismiss action |
add | Tabs | Add new item |
remove | Tabs, Pill | Remove/delete item |
sort-asc | Table | Ascending sort indicator |
sort-desc | Table | Descending sort indicator |
Per-Component Overrides
Override icons for a specific component instance without affecting global defaults.
Pass an icons prop with the names you want to change:
svelte
Highlighting code...
Item-Level Icons
Map an icon field in your data to display per-item icons. The icon value
should be a UnoCSS icon class:
svelte
Highlighting code...
Icon Collections
Rokkit works with any UnoCSS icon collection. Popular choices:
@iconify-json/solar— Solar icon set (used by default Rokkit theme)@iconify-json/lucide— Clean, minimal line icons@iconify-json/mdi— Material Design Icons@iconify-json/heroicons— Heroicons by Tailwind
bash
Highlighting code...
Related
- Styling — Theme architecture and CSS customization
- Color System — Semantic color tokens