Back to Playbook

Stroke Style

Ensure icon stroke widths and styles match the geometry and weight of your chosen typeface.

Why it matters

Stroke style defines the "voice" of the icon. A thick, rounded stroke feels friendly and informal, while a thin, sharp stroke feels precise and elegant. Matching the stroke to your typography creates a harmonious visual language.

Stroke Playground

Adjust the stroke properties to see how they change the character of the icon.

Style Attributes

Weight

The thickness of the line. Should match the stroke width of the font at the same size.

Terminals

The ends of the strokes (Butt, Round, Square). Round is friendlier, square is more technical.

Joins

How lines connect (Miter, Round, Bevel). Affects the sharpness of corners.

Corner Radius

The roundness of shapes. Consistent radii make the set feel cohesive.

Style Checklist

  1. Match Type

    Does the icon weight feel similar to the text weight?

  2. Scale Strokes

    Decide if strokes scale with size or remain fixed (usually scale for illustration, fixed for system icons).

  3. Pixel Snapping

    Ensure strokes align to the pixel grid to avoid blurriness.

Previous: Creating Icons Next Section: Micro Interactions