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

  1. Don’t reinvent the wheel: Please skim through our existing Icon library to check whether we have a pre-existing icon for your request. 

  2. Keep it simple: Keep your icons simple by picking a very clear and singular message for each one.

  3. Make them match: Make sure all icons in a set are similar in terms of design style, color usage, line/shape weight. Avoid sourcing icons from more than one location (thenounproject, flaticon, icon8, material.io etc).

  4. Use the palette: Using the CommCare/Dimagi color palette to pick colors can help to keep your icons uniform.

  5. Make them clear: Ensure a high contrast between the icon and background.

  6. Examples: Here are a few different icons used in different CommCare applications.


  7. Double check your icons: Before you deploy an app, confirm that all of the multimedia links are complete and have the right file type by using the Multimedia Reference Checker. You can also find the pixel size of your image next to the link.

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.