Icons

The ↳ Icons page (in 📕 Utility components) holds every icon the kit uses: about 2,200 icons from Remix Icon, 255 country flags and 6 credit card logos. Every icon is a component, so you can drop it into a design from the Assets panel or swap it into a button, link or form field.

Finding an icon

Icons are named Category/name, so they show up in folders in the Assets panel. Most icons come in two versions: -line (outlined) and -fill (solid), for example System/add-box-line and System/add-box-fill.

Folder	Examples
System	Arrows, checkmarks, close, menu, search, settings
Business	Calendar, mail, charts, briefcase
User, Health	People, accounts, medical symbols
Device, Media	Phones, computers, play, pause, volume
Document, Editor, Design	Files, text formatting, layout tools
Finance, Map, Buildings	Money, cards, pins, buildings
Logos	Social networks and brands: Facebook, Instagram, YouTube…
Weather, Others	Weather symbols and everything else
Flags	Country flags, named with the country code: Flags/Germany (DE)
Credit Cards	Visa, Mastercard, Amex and others

Icons are 24 × 24 px (flags and credit cards are wider). To find one quickly, type part of its name in the Assets panel search, for example “arrow-right”.

Swapping icons in components

Buttons, links, form fields and many templates have icon properties, such as ↳ L icon swap on buttons or ↳ Left Icon on text inputs. Select the component, open the property in the Design panel and pick another icon from the list or search for it.

Changing an icon’s color

Icons are black by default. Select the icon layer and change its fill, or link the fill to a color variable such as Main Colors/Primary/Main, so it follows your palette.

Good to know

• remixicon.com is a good place to browse the full Remix Icon set by keyword before you search the Assets panel.
• Need an icon the kit doesn’t have? Add it as a component on the ↳ Custom components page, with a 24 × 24 px frame, so it swaps in the same way.