Principles
Icons must be consistent with the open source Material.io icon set.
Design a new icon only if the Material.io icon set does not provide a suitable icon.
Do design a new icon rather than misusing existing icons (iOS Human Interface Guidelines).
Icons must:
- Be clear, single tone and forward facing (Material.io, iOS Human Interface Guidelines)
- Used consistently across the app
- Appear in appropriate colours - see Branding
- Use colour to indicate selected and deselected states: do not use two different icons to indicate selected and deselected states such as a solid and outlined version (iOS Human Interface Guidelines)
- Be labelled with appropriate text (WCAG 2.1), in title case: do not include text within an icon (iOS Human Interface Guidelines)
Home Icon
Icon touch targets must be a minimum of 44px x 44px and surrounded by a small amount of inactive space (WCAG 2.1, Material.io).
Save icons in PNG or SVG formats (Material.io), SVG perferred. SVG format requires less memory, and designers can download, recolour, resize and convert SVG files with no loss of quality.
Store app icons in 1024px x 1024px resolution as SVG.
Downloads
The app design should use the icons provided as first choice (available in PNG and SVG formats).
New icons must only be created if icons provided are not suitable. New icons must:
- Be clear, single tone and forward facing
- Match the style of the current icon set
- Be added to the icon table for future use
Select to download zipped files.
| File Name | Usage/Descriptor | Icon | Download |
|---|---|---|---|
| alert_high | High alert icon |  |
Download alert |
| alert_low | Low alert icon |  |
|
| alert_medium | Medium alert icon |  |
|
| arrow_back_black | Back arrow for pages without a direct menu location, to enable navigation to previous page |  |
Download back arrow |
| arrow_back_blue |  |
||
| arrow_back_white |  |
||
| barcode_black | Barcode for scanning icon |  |
Download barcode |
| calendar_black | Calendar icon for functions such as date entry or display |  |
Download calendar |
| calendar_blue |  |
||
| calendar_white |  |
||
| camera_black | Camera icon |  |
Download camera |
| camera_white |  |
||
| checkbox_checked | Checkbox, checked and unchecked |  |
Download checkbox |
| checkbox_unchecked |  |
||
| delete_black | Deletion icon (rubbish can) |  |
Download delete |
| delete_blue |  |
||
| delete_white |  |
||
| filter_black | Filter icon for grouping or ordering search results |  |
Download filter |
| filter_blue |  |
||
| filter_white |  |
||
| group_black | Icon for groups for connecting or communication |  |
Download group |
| group_blue |  |
||
| group_white |  |
||
| help_black | Help Icon |  |
Download help |
| help_blue |  |
||
| help_white |  |
||
| home_black | Home icon |  |
Download |
| home_blue |  |
||
| home_green |  |
||
| home_white |  |
||
| main_logo_black | NWIS Main logo |  |
Download logo |
| main_logo_blue |  |
||
| main_logo_white |  |
||
| mic_black | Microphone icon |  |
Download mic |
| mic_blue |  |
||
| mic_white |  |
||
| notes_black | Notes or Feed icon |  |
Download notes |
| notes_blue |  |
||
| notes_white |  |
||
| now_black | To do now icon |  |
Download now |
| now_blue |  |
||
| now_white |  |
||
| nwis_logo_black | NWIS logo with text |  |
Download text logo |
| nwis_logo_blue |  |
||
| nwis_logo_white |  |
||
| nwis_colour_splash | NWIS stacked hexagon artwork |  |
Download splash |
| overdue_black | Overdue icon |  |
Download overdue |
| overdue_blue |  |
||
| overdue_white |  |
||
| radio_off_button | Off button |  |
Download radio |
| radio_on_button | On button |  |
|
| results_black | Results icon |  |
Download results |
| results_blue |  |
||
| results_white |  |
||
| settings_black | Settings icon: standard cog |  |
Download settings |
| settings_blue |  |
||
| settings_white |  |
||
| settings_menu_black | Top level or settings menu icon |  |
Download settings menu |
| settings_menu_blue |  |
||
| settings_menu_white |  |
||
| todo_black | To do icon |  |
Download todo |
| todo_blue |  Blue To-do Watch |
||
| todo_white |  White To-do Watch |
||
| user_black | User, person or profile icon |  Black User |
Download user |
| user_blue |  Blue User |
||
| user_white |  White User |
||
| watchlist_blue | On watchlist icon |  Blue Watchlist |
Download watchlist |
| watchlist_white |  |