Menu

LinguaItaliano
Contattaci
Blog · Design

Before drawing a new icon

Before drawing an icon, establish its meaning, label, family and behavior at the actual display size. Reuse familiar concepts where they fit.

Before drawing a new icon

Write down the intended meaning

Describe what the icon should communicate before choosing a shape. Navigation, deletion and changing a selected value create different expectations. Also distinguish decoration from information.

A star used for both favorites and recommendations can be ambiguous about meaning and interactivity. Review the concepts already represented in the interface and keep a consistent meaning for repeated shapes.

Do not assume a new concept is understandable without text. A short visible label may be the clearest solution. The purpose of an icon is to help people find information and actions, not simply to eliminate words.

Check the existing family and usage terms

An individually polished icon can still clash with nearby stroke widths, corners and fill styles. Search the existing family for the intended meaning and compare visual weight at the same display size.

For shared libraries or external assets, check the source, usage terms and version. Downloadability does not establish permission for every modification or redistribution. Use the terms attached to the actual asset.

If a custom drawing is needed, record the missing capability: a brand-specific expression or a domain concept the current family cannot convey. Give it a clear name to prevent several near-identical representations of the same idea.

Separate the drawing from its interactive area

A small drawing does not require a small interactive area. Provide a usable target and clear separation from nearby actions, especially when accidental activation has different consequences.

An icon-only button needs an accessible name describing its action. If a tooltip is present, check how touch and keyboard users obtain the same information. Decorative icons beside text should not unnecessarily repeat that text to assistive technology.

Directional arrows and brand marks should not be mirrored indiscriminately. Define which shapes depend on reading direction or context, then check them in the translated interface.

Review actual sizes and state combinations

Inspect icons at their actual display size in menus, buttons and lists. Include light and dark themes, selection and disabled states, and long adjacent text. Fine details that look good enlarged may disappear at normal size.

Ask reviewers what action they expect before revealing the intended label. Repeated disagreement may call for visible text or another representation rather than a minor drawing adjustment.

Retain the name, purpose, source location, supported sizes and examples. Update other representations of the same action so people can continue using the meaning they have already learned.

Altri articoli

Vedi tutti gli articoli
Cerchiamo persone con cui costruire

Il nostro modo di lavorare e i benefit sono descritti nella pagina dedicata.