Guidelines
Our library is based on Google Material Rounded set.
Grid
Icons use a base size of 24×24pt with 2pt safe-area along the edge.
Reference shapes
The following base shapes should be used as a base for the icons to maintain the balance with the rest of the library.
Stroke
Icons use consistent stroke of 2pt for base shapes and 1.5pt for complex shapes. Stroke terminals are rounded.
Corners
Icons use 2pt radius by default.
Best practices
Pair icons with text unless meaning is universally clear (e.g, Search)
Don’t use icons that don’t match library's visual style
Stick to system metaphors (e.g, Calendar, Person, Search), not niche or decorative ones
Don't modify existing icons stylistically (e.g, adding thicker stroke)
Requesting new icons
If current icons don’t suit your needs you can request new icons to be added to the library. To request a new icon follow these steps:
-
Confirm the need
Before proposing a new icon, check if your case can be solved with text or an existing symbol. New icons should only be added if the meaning is universal, reusable, and necessary. -
Check Material icons
Search the Material icons library to find a symbol that suits your use-case. -
Create a Jira ticket
Include the following: - The proposed icon (SVG file or link to the Material Icons)
- Use-case where icon is going to be used and related links (Figma file, prototype, testing environment)
- (Optional) Other potential use cases — these strengthen the case for adding the icon
Custom icons
If you need an icon that doesn’t exist in the Material library, reach out to the Design System team first to confirm that a new icon is really necessary. This avoids unnecessary work and ensures consistency.
Once the need is confirmed, there are two paths:
- Design it yourself: follow our icon guidelines listed above, then create a Jira ticket with:
- Icon in SVG format
- Use-case where icon is going to be used and related links (Figma file, prototype, testing environment)
- Request a design: if you prefer, the Design System team will handle the design. In this case, you only need to provide the use case and rationale, and we’ll create and add the icon directly.