© 2021 Leviy

Iconography

Iconography plays a very important role in Leviy. As some users cannot speak or read one of our provided languages the correct use of icons can help them understand and complete certain actions within our application.

Guidelines

Match to meaning

When choosing an icon to signify a certain action or piece of content, make sure the icon represents the purpose. Keep the context of the user that has to complete the specific action in mind. Also take into account there might be some differences between countries where our users are located.

Same purpose = Same icon

When searching for appropriate icons to complete a design, first check the icon library to see if there is an icon that can be reused before of introducing a new one. If an icon is reused, make sure it represents the same purpose.

Pair icons with text

The main purpose of icons is to help clarify content and improve scannability of the user interface. Unless its an universally understood action, such as settings, icons should be paired with text or labels.

Icons

Our icon package consists of slightly rounded, minimal icons. With their symmetrical and consistent look, they ensure readability and clarity. Icons are displayed as 24 x 24 dp. Read more about grid and keyline shapes guidelines here.

Action

Action icons are used to signify actions in the application.

add
Add
add
close
Close
close
expand_less
Collapse
expand_less
delete
Delete
delete
cloud_download
Download
cloud_download
edit
Edit
edit
expand_more
Expand
expand_more
filter_list
Filter
filter_list
touch_app
Manually
touch_app
restart_alt
Reset
restart_alt
done
Save/Done
done
search
Search
search
cloud_upload
Upload
cloud_upload

Content

Content icons are used to help clarify the meaning of content.

account_circle
Account
account_circle
my_location
Address
my_location
block
Block
block
emoji_food_beverage
Break
emoji_food_beverage
contact_mail
Contact
contact_mail
visibility
Check
visibility
people_outline
Client
people_outline
error
Danger
error
insert_drive_file
Document
insert_drive_file
widgets
Element
widgets
groups
Employees
groups
cloud_queue
Empty state
cloud_queue
folder
Folder
folder
group_work
Group
group_work
home
Home
home
photo
Image
photo
info
Info
info
label
Label
label
language
Language
language
lock
Locked
lock
nfc
NFC
nfc
circle
No status
circle
tag
Number
tag
location_city
Object
location_city
business
Organisation
business
picture_in_picture
Part
picture_in_picture
pause_circle
Pause
pause_circle
flag
Released
flag
settings
Settings
settings
sort_by_alpha
Sort alphabetically
sort_by_alpha
check_circle_outline
Success
check_circle_outline
supervisor_account
Supervisor
supervisor_account
support
Support
support
schedule
Time
schedule
title
Title
title
toggle_on
Toggle
toggle_on
place
Unit
place
stars
User type
stars
movie
Video
movie
warning
Warning
warning

Modules

Modules icons are used to identify the different services or modules in our platform.

account_circle
Accounts
account_circle
pie_chart
Analytics
pie_chart
fact_check
Checklists
fact_check
assignment
DKS/RQMS
assignment
dashboard
Dashboard
dashboard
description
Files
description
content_paste
Forms
content_paste
hotel
Housekeeping
hotel
date_range
Periodic Tasks
date_range
timelapse
Time & Attendance
timelapse

Navigation icons are used to signify actions with which users can navigate through the application.

apps
Apps
apps
arrow_back
Arrow back
arrow_back
chevron_left
Chevron left
chevron_left
chevron_right
Chevron right
chevron_right
more_vert
Content menu
more_vert
menu
Menu
menu

Usage

people
<i class="material-icons-round">people</i>

Resources

We use the rounded icon set from Google Material Design.