Icon size
We use 16px outlined icons in most scenarios. With the limited size, we try to keep the shapes simple to ensure they’re legible enough. This is also the base size we design all icons for.
When creating larger icons, you can adapt the small icon further and add more details.
Icon sizes
Icon grid
Use the layout grid provided in the Figma library to design new icons. This ensures consistency with other icons in the set. Grid contains guidelines for all regular shapes and directions.
Applying the grid
Your shapes can snap to one or multiple guides in the grid, but it’s always better to go for simpler paths with neutral character. We prefer flat icons where possible to ensure their legibility in small sizes.
Path style
Border
We use 1.5pt border for all outlined icon shapes. Since we’re aligning objects to half point grid, you’ll need to make sure that shape is centered correctly in its viewbox.
Radius
Use 2.5pt radius for general rounded corners. This gives the icon a softer look matching the rest of the set. Secondary smaller shapes should use 1.25pt border instead to scale the radius correctly.
Solid variants
You might need to design a solid variant for the shape in case it’s going to be used in many colors with variable contrast or as a toggle. When doing so, also include the border’s expanded area.
Things to avoid
Avoid 3d shapes or using different perspective.
Avoid sharp corners, especially on rectangular shapes.
Avoid sharp end points on strokes.