Crafting an Icon | Dialtone Design System

Our icons are designed for easy recognition and understanding. They are a visual support, helping people navigate the experience more effectively.

On Figma

Go to the Icon Builder page in Figma and follow the instructions. Remember to work on a branch and send a review when the icons are ready.

Use simple lines and shapes. Avoid creating overly literal, complex icons.
Utilize the icon grid while maintaining the style of each icon.
The icon's content should remain within the 2px padding (on size 500/24px); no part of the icon should extend beyond this area.
Both exterior and interior corners should be 2px (on size 500/24px).
The stroke style should be solid, end points round, and join round.

Create a new branch in dialtone repo starting with "dlt-xxxx-" in the name.
Place the exported SVG file(s) in the appropriate folder category inside ./src/svg/, files names should be in kebab-case.
Run nx run dialtone-icons:build
Add keywords related to the icon(s) in the packages/dialtone-icons/src/keywords-icons.json file.
Commit and push your branch to dialtone.
Open a pull request, once approved it can be merged into main and will go out in the next dialtone release.