Icon styles explained: stroke, duotone, tint and more

Nuqta draws every icon once on a 24px grid, then renders it in 8 styles and 3 corner shapes. Here is what each one is for.

Stroke

Clean 1.5px outlines. The default for most interfaces: navigation, toolbars and forms. Free in every corner shape.

Light

Thinner lines for large sizes, editorial layouts and calm, airy screens.

Bold

Heavier lines that hold up at small sizes and on busy backgrounds.

Filled

Filled shapes with details cut out. Use it for selected states, like the active tab in a bottom bar.

Duotone

An outline over a soft tint of the same color. Adds depth without adding a second color.

Twotone

Outline in your main color with details in an accent color. Good for feature lists and empty states.

Tint

Filled shapes in two tones of one color. Friendly and solid, popular in mobile apps and dashboards.

Shift

Nuqta’s own style: the shape is offset in your accent color behind the outline, for a printed, layered look.

Corner shapes

Round

Classic

Sharp

Round feels soft and friendly. Classic is neutral. Sharp suits technical tools and strict, geometric brands. Pick the one that matches your buttons and cards.

Mixing styles

A common pattern is Stroke for idle states and Filled for the selected state. Because every style shares one grid, swapping never shifts your layout.