ruk·si

🌈 UI
Icons

Updated at 2020-09-01 23:16

Computer icons are small images that help user to navigate a digital system. Icons are related to logos but logos are more related to branding than to usability.

Icon's primary goal is to communicate a concept quickly. The most efficient way of choosing icons is using an existing metaphor. And make sure you are as brief as possible, using the least amount of shapes possible (while staying inside the visual look you are going for, of course.)

If you need a icon for save, don't invent something but just use a floppy disk.

Make sure your icons are readable on small and large sizes. Making sure there is a good amount of room between strokes so they translate well to small screens. Don't blindly trust the numbers, use your eyes.

Make sure icon is optically balanced, not geometrically. This can be hard to explain, but sometimes when you have a centered symbol with some surrounding shapes, it sometimes looks off even if it's fully at the center. It's all about the "weight" of the shapes.

Icons that are used in same environment should be consistent in style.

  • Similar glares and other gradients.
  • Similar saturation, can have different colors.
  • Don't mix solid icons where color creates the symbol and outline icons where whitespace creates the symbol.
  • Line stroke thickness should be same in all icons.
  • If icons have background, keep the borders consistent. Only rounded corners or all sharp corners.

Sometimes you cannot choose some of the icons you have to use. You should still try to be as consistent as possible with the icons you control.

If your icon contains text, try to use same font as the system.
Consider using similar icon style as the default icons set.

Don't use grey as the application icon color. If you icon still looks dull, try adding subtle gradients and tune the colors a bit brighter.

Application icons should be symbols for something. Find an instantly recognizable symbol that relates to what the feature does. Then people will remember it better.

Subtle animations changes communicate polish. Consider if you can make some of your icons feel dynamic.

Calendar icon that changes text to match current date.

Include text next to menu icon buttons, or at least on hover. Depends on your target audience but most of the time you should include some text. There are many non-technical people that do not understand that a floppy disk means save.

Sources