Icons

Guidelines

• Avoid relying on an icon by itself to provide meaning, as the meaning of the icon may not always be entirely obvious to the user.
• icons should have space between them and the label they represent. For normal sized icons (14px) usually 0.5rem. This is the sm classes in our styles.
• Icon colour follows the text colour of the content around them. To change the colour, add one of the tailwind text- colours, for example text-brand-500.

Usage

Our icons are web components. Each icon is a seperate component. They are implemented as both pure web components and as React components; which you use is up to you. See Components introduction for more on using our components.

Web component

React component

Animations

Make the icon spin with the ‘spin’ property.

All Icons

Adding new icons

Design guidelines

Icons are designed and maintained in Figma. If you require access to the files, ask in #design-system-group. You are welcome to design new icons using whatever you like, but they will need to be added to Figma eventually.

Icon design rules

• The icons live on a 16x16px grid;
• Use round cap for open shapes, or 2px rounded corners for closed shapes.
• They must be aligned to the center of the grid.
• Use 3px stroke for simple shapes;
• Use 2px stroke for more complex shapes.

How to add to Gunnel

Gunnel icons are web components containing SVG. The SVG files are found in the design repo in packages/assets/icons/v2, and the web components in packages/components/src/components/fun-icon-[icon-name] .

To add a new icon:

• Check out the design repo
• Create a new branch
• Add the icon svg to packages/assets/icons/v2. Note that the name of the file will be the name of the icon component too.
• Generate the components .tsx from the svg files:

• Build components: (will generate documentation, types, etc.)

• Commit as a new feature ( feat: new [my icon name] icon)
• Push and create a pull request from your branch.