These ship inside Sitewright, so a site can have icons without asking anyone for them. Click one to copy its name and write it in your code (<Icon name="coffee" />), or describe what you need (<Icon for="Shipped orders" />) and let it pick. You never register an icon anywhere. Behind them is the whole Iconify library, 200,000+ open icons in 150+ sets, which you reach by naming a set: tabler:home, mdi:account.
209in the kit, offline
1,866Lucide, the default set
6,220Tabler
1,402Font Awesome 6 Solid (credit required)
200,000+across 150+ sets, through Iconify
Click copies/ search
Click an icon to copy its id.
Interface 30
Arrows 7
Status and feedback 21
Devices and tech 24
Commerce and delivery 19
Food and drink 12
People and security 12
Communication and media 12
Files and data 18
Charts and time 14
Places and travel 16
Work, health and nature 24
No icon matches that. Try a shorter word, or search the full library with node scaffold.mjs --list-icons <word>.
Using them: just write the icon
<Icon name="rocket" /> // write it where you want it. Nothing to register.
<Icon name="tabler:home" /> // any other set
<Icon for="Shipped orders" /> // or describe it, and the fitting icon is chosen
The project finds every icon its code asks for and brings in the ones that are missing, while npm run dev runs and before every build. Your own words are set once ("icons": { "map": { "roast": "coffee" } }) and apply everywhere. Say icons: auto and the navigation, stat cards and chips get theirs too.
Lucide is ISC licensed (with some icons derived from Feather, MIT); the licence text is written into every site that uses them. Other sets keep their own licences, which the generator records and checks. Full guide.