Why Use Icons?

Icons can be included in menu and form lists. In addition to make an application look much nicer, they also can help with navigation. Here is what menu and form lists look like with icons included:

 

                                  

Icons Best Practices

  • Keep it simple - pick a very clear message for each icon and keep it simple. Minimal is best, most people should understand it in a fraction of a second, because that’s how fast they are navigating through the application.

  • Make them match - matching colors and images that are all the same style and/or format are key to keeping the User Interface clean and easy to understand.

  • Use different colors for each menu - i.e. if you have a “mother menu” the menu icons and all forms might be purple, whereas a “child menu” in the same application would have blue icons for the menu name and all forms.

  • Design transparent icons - this will make your icons blend with the standard CommCare background.

  • Always review the Multimedia Reference Checker - Before you deploy an app, confirm that all of the multimedia links are complete and have the right file type. You can also find the pixel size of your image next to the link.

Keep in mind, some users are color blind, others might not read at all. Visual clues are a big help, here are some tips!

How to Find Existing Icons

Dimagi has a repository of icons available for free here.

Alternatives:

The Noun ProjectThis website has a huge library of free Icons. With a paid version you can download all of the website's icons in many colors. Make sure that these are “public domain” instead of Creative Commons. Public domain icons are freely available to use as much as you want to use them. If you use icons with Creative Commons licensing make sure that you give appropriate credit (http://thenounproject.com/legal/). 

FontAwesome: Another library of free, crowd-sourced icons. (https://fontawesome.com/icons)

 

1 Comment

  1. FontAwesome is a great icon resource built as a font. You can download the icons you need here: http://fa2png.io/ and even choose the size and color that you need.