Table of Contents: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 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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
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.
...
https://thenounproject.com/: 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/).
...