General guidelines

  • Small icons are Monochrome
  • Use less than 8 different colors
  • Solid, no strokes
  • All have a small/normal version working at 18px width, and which may still work at 15px width
  • May have a large version more suited for 32px+ width
  • Square SVG files

Icons are built by combining a color symbolizing what they’re doing, one or two symbols symbolizing the objects involved, and possibly a badge showing the action.

This is like building a sentence (the icon), using modal verbs (the color), verbs and adjectives (the badges) and nouns (the symbols). You can see the icons as a simple universal writing for a simple universal language.

Examples

Sizes

Smaller icons are monochrome. Bigger icons can be a bit more detailed and have two or three colors.

S L Name
Quit
Maximize
Go to settings
Save file

Building icons

Save file:

  • Modification Color
  • File Symbol
  • Save Badge

Save file as:

  • Creation Color
  • File Symbol
  • Save as Badge

Load text file:

  • Creation Color
  • File Symbol
  • Text Symbol
  • Load Badge

Go to tutorial:

  • Neutral Color
  • Documentation Symbol
  • Video Symbol
  • Go to Badge

Colors / General Actions (modal verbs)

The color of the icon should show its goal, i.e. what it’s going to do, generally speaking.

Here is the list of the colors we propose

Badges / Specific actions or states (verbs or adjectives)

A small badge may be added to the icon, showing specifically the triggered action, or changed state.

Here is the list of the badges we propose

Base Objects / Abstract Symbols (nouns)

The main symbol in the icon should show the object it is manipulating. The icon could possibly combine two of them.

Here is the list of the symbols we propose

Icon List (sentences)

We’ve already built, and are building, icons to be used in our - and your - software, based on these guidelines and existing symbols, badges and colors.

Here is the list of these icons