A guide to creating new icons that are consistent with our visual style.
Custom icons can communicate unique concepts that standard libraries miss. However, they must be built with the same grid, stroke weight, and visual logic as the rest of the set to feel native. Inconsistent icons break immersion and lower perceived quality.
Visualize the underlying grid and geometry used to construct consistent icons.
Align points to the pixel grid to ensure icons look sharp on all screens.
Build icons from basic shapes (circles, squares, rectangles) for consistency.
Adjust visual weight so icons look balanced, not just mathematically equal.
Reduce details to the essential essence. Less is more at small sizes.
Use a standard artboard size (e.g., 24x24px) for all new icons.
Keep content within a safe area (e.g., 2px padding) to prevent clipping.
Center strokes or align them consistently (usually center or inside).