Design system
Tags
Last updated 4 April 2025
The Insites tag component offers you an array of colors to choose from, both light and dark versions. Plus the ability to customise the text and add any icons from the Gallery!
Requirements
To use these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of the component.
Figma Component Variant Properties
Tags
| Properties | Options | Notes |
|---|---|---|
| Light | True, False | Toggle to use the default or light colours for the tag. |
| Outlined | True, False | Toggle to use outlined or solid style of the tag component. |
| Color | Grey, Blue, Red, Green, Yellow, Orange | Select the color to use for the tag. |
| Label | Enter the label for the tag. | |
| Show Icon | True, False | Toggle to show or hide the icon for the tag. |
| Icon | Enter the icon for the tag. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon. |