Iconography

It all depends on the need. Public libraries now cover most cases, with icon sets that are consistent with one another and come in several styles. They suit most projects. Custom icons are justified when a brand's identity is strong enough that standard icons clash with it, or when a profession handles concepts that no library covers.

By settling on one style and sticking to it. Outline or solid, stroke thickness, rounded or sharp corners, colour or no colour. An icon on its own can look right and jar once it sits in a group: you judge them by looking at them together. A library centralised in the design tool then stops everyone adding their own version.

A decorative icon, which goes alongside text that is already explicit, needs no text alternative. A functional icon, which triggers an action without a label, does need one, so that the close cross on a window is announced by a screen reader. Information must never rest on the icon alone, for those who don't recognise the symbol.

16 or 20 pixels for an inline icon, in text or next to a label. 24 pixels for navigation and icon buttons. The clickable area must be at least 44 pixels a side, even if the icon inside it is smaller; otherwise the target becomes hard to hit with a finger.

SVG is a vector format: it stays sharp at every size and on every screen, without having to produce several versions of the same icon. Its file size is small, which counts when an interface displays dozens of them. Its colour and stroke thickness are controlled in CSS, so an icon can follow an interface's theme or change state without being redrawn. Finally, it accepts the text alternative screen readers need, which an icon embedded as an image doesn't always allow.