Browse

The small square icon that launches an application from a phone or computer home screen. It must be recognisable at small sizes and often uses a bold symbol on a solid background.

How rounded the corners of an icon's shapes are. Matching the corner radius across a set gives icons a shared personality, from sharp and technical to soft and friendly.

An icon that uses two tones of a colour, typically a solid part and a lighter transparent part, to add depth without full colour. It reads as slightly richer than a plain single-colour icon.

An icon made of solid filled shapes rather than thin outlines, giving it a heavier, more grounded look. Filled icons often mark a selected or active state in an interface.

A font file where each 'letter' is actually an icon, so symbols can be sized and coloured with text styling. It is a technical way to ship many single-colour icons efficiently.

The invisible framework of squares, circles, and guide lines a designer draws icons on so a whole set shares the same size, proportions, and visual weight. It keeps icons looking like a matching family.

A collection of icons designed together to share the same style, line thickness, and proportions so they look consistent when used side by side. Using one set keeps an interface visually tidy.

A symbol that stands for an idea or concept rather than picturing a specific object, like a heart for love or a red circle-and-slash for 'not allowed'. You have to learn its meaning; it does not simply look like a thing.

A guide shape, such as a square, circle, or rounded rectangle, that sets the maximum area an icon can fill. Designers keep each icon inside the same keyline so a set feels evenly sized.

An icon drawn as thin outlines with no solid fill, so it looks like a simple line sketch. This style feels light and modern and works well in interfaces.

Nudging an icon slightly off its mathematical centre so it looks correctly centred to the eye. Shapes like triangles or arrows need this because measured centring can appear lopsided.

A simple picture that represents an object or idea by looking like the real thing, such as a knife-and-fork sign for a restaurant. It communicates at a glance without words.

The thickness of the lines that make up an icon. Keeping the stroke weight consistent across a set is what makes the icons look like they belong together.

A small functional icon used inside an interface for common actions like search, settings, or delete, rather than for branding. System icons are meant to be instantly understood and used consistently everywhere.