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
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 badges and colors.