Incorporating icons int your application is a great way to not only make the application more engaging, but more intuitive to navigate. This page provides some guidance on how to incorporate icons into your application.
...
Table of Contents:
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Icon Best Practices
Icons can be included in menu and form lists. In addition to make an application look much nicer, they also can help with navigation.
...
When building out icons
Don’t reinvent the wheel: Check with other projects/team members to determine if there is already a relevant set of icons you could leverage
Keep it simple: Keep your icons simple by picking a very clear and singular message for each 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 https://dimagi.com/styleguide/colors/ 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
https://thenounproject.com/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/).
https://fontawesome.com/icons:Font Awesome: Another library of free, crowd-sourced icons. (https://fontawesome.com/icons)
Adding Icons in Case List and Case Detail screen
...
It is currently possible to use icons within the case list or case detail page. This page will go through the process of how to set this up.
...
From your project space, select the Gear in the top right hand corner.
Select Project Settings
On the left hand side, select ‘Feature Previews’
Check the ‘Icons in Case List’ checkbox to enable the feature preview.
Set Up
Once you have enabled the feature preview, proceed to the case list for the module you would like to use icons for. Add a new property to the case list, then alter the format to “Icon (Preview!).”
...
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
Order Matters! As mentioned previously, the order in which you set up the calculations and display icons is very important. Calculations are triggered, and icons set, starting with the top of the list. From our above example, moving the calculation for the Green icon to the top of the list can break our configuration and make it so the Yellow icon will never appear. The date is still 12/5/2017 (May 5th, 2017): 
|
...