Why Use Icons?
...
Icons Best Practices
Don’t reinvent the wheel: Please skim through our existing Icon library to check whether we have a pre-existing icon for your request.
Keep it simple
...
: Keep your icons simple by picking a very clear and singular message for each
...
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.
...
one.
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).
Use the palette: Using the CommCare/Dimagi color palette to pick colors can help to keep your icons uniform.
Make them clear: Ensure a high contrast between the icon and background.
Examples: Here are a few different icons used in different CommCare applications.
- 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 Project: This 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)
...