Icons

Icons enhance an experience by providing intuitive and efficient navigation, conveying information concisely, and making it more visually appealing.

Clear

Icons are simple and effectively convey their intended meaning. Avoid unnecessary complexity that makes the icon difficult to recognize. The goal is to communicate quickly and clearly.

Two icons made with basic geometric shapes representing an house and a flower.
Do

Draw simple objects that are easy to identify.

Two detailed icons representing an house and a flower.
Don't

Embellish icons with unnecessary details.

Consistent

Icons follow a cohesive visual style across the user interface. This includes a consistent use of line weights, shapes, dimensions, perspectives, and general style. Consistency in designs enables users to quickly recognize functionality and navigate the interface more intuitively.

On top: a series of icons using the same check mark element. At the bottom: a series of icons using a credit card represented consistently.
Do

Reuse parts of other icons in the set to maintain visual harmony across all icons.

A microphone and a pencil represented in a way that is consistent with common interfaces.
Do

Use universally recognized icons.

A microphone and a pencil represented in a unique way.
Don't

Reinterpret or stylize universally recognized icons.

Universal

Universally recognized symbols and metaphors ensure icons are easily understood by a broad user base.

Left: an icon composed with a shopping cart and an x sign. Right: an icon composed with a person and a plus sign.
Do

Leverage universally recognized symbols and metaphors to create new icons.

An icon with a 2 euro coin representing the concept of “Money”; an icon with an american football representing the concept of “Sports”; and a floppy disk representing the concept of “Save”.
Don't

Relying on cultural-specific, niche, or outdated metaphors may not be suitable for all users.

    On this page