Rokkit ships curated icon sets as Iconify-compatible JSON bundles, fully tree-shaken by UnoCSS. Use semantic icons for component state UI; glyph icons for general-purpose application icons.
Collections
| Import path | Prefix | Count | Contents |
|---|---|---|---|
@rokkit/icons/semantic.json | built-in (action-add) | 376 | Semantic UI icons for Rokkit components — 94 icons × 4 variants |
@rokkit/icons/glyph.json | i-glyph: | 637 | General-purpose glyph icons, 4 variants each |
@rokkit/icons/auth.json | i-logo: | 107 | Auth provider logos |
@rokkit/icons/app.json | i-app: | 36 | Application-level icons |
@rokkit/icons/twotone.json | i-twotone: | 4 | Two-tone icons |
Configuration
Load collections in rokkit.config.js using the icons key. The key name you
use becomes the UnoCSS class prefix:
With the config above, use i-glyph:database, i-app:alert-bell, i-logo:google. Any Iconify-compatible JSON file works — including third-party sets
like @iconify-json/solar.
Semantic Icons
The semantic collection contains 94 icons used internally by Rokkit components for state and
interaction UI. The preset registers them as shorthand aliases — use the icon name directly as a
class, e.g. action-add. Examples:
action-addaction-deleteaccordion-closedaccordion-openedcheckbox-checkedcheckbox-uncheckednode-opennode-closedmode-darkmode-lightsort-ascsort-descnavigate-upnavigate-downBrowse the full set in the Icon Browser playground.
Glyph Icons (160 icons × 4 variants)
The glyph collection has 160 base icons, each available in four variants: default, -outline, -solid, and -duotone-outline. Use as i-glyph:{name}.
accessibilityaccordionadd-circlealign-vertical-spacingalt-arrow-downalt-arrow-rightalt-arrow-uparrow-leftatombellboltbookbook-2boxbreadcrumbsbrushbugbuttoncalendarcardcarouselchartchart-2chart-squarechat-roundchat-square-codecheck-circlecheckboxcheckbox-groupchecklist-minimalisticclipboardclock-circleclose-circlecloud-downloadcloud-uploadcodecode-squarecomboboxcompasscopycpu-boltcrumbscursordatabasediskettedocument-textdownloaddropdownediteyefilefile-textflagfloating-actionfloating-navigationfolderfolder-openformsgallerygallery-widegamepadgit-mergeglobalgraph-newgridgrid-layouthamburger-menuhearthomehourglassiconinboxinfo-circleinput-arrayinput-colorinput-dateinput-emailinput-fileinput-numberinput-objectinput-passwordinput-telinput-textinput-text-areainput-textareainput-timeinput-urlitemkeyboardlayerslayers-minimalisticlazy-treeleafletterlistlist-checklist-itemslockmagic-stickmagic-stick-3magnifermap-arrow-rightmaximize-squaremenumenu-sidebarmessageminimize-squareminimize-square-3minus-circlemonitormoonmulti-selectmultiselectpalettepalette-managerpallete-2pie-chart-2pillplainplay-circleprogressradioradio-grouprangeratingrestartrocketscissorssearch-filterselectsettingsshareshieldsidebarsplit-viewstarstarssteppersunswitchswitch-buttontabletabstagterminaltext-boldtext-italictext-underlinetimelinetoggletoolbartrash-bintreeupload-progressupload-targetuseruser-circleusers-groupusers-group-two-roundedwidgetwidget-5Building Custom Icon Sets
Use the Rokkit CLI to bundle your own SVG folders into the same Iconify JSON format. Each subfolder becomes one JSON file:
See CLI reference for the full flag reference and config file format.