© 2026 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
alt_route
Change
alt_route
close
Close
close
expand_less
Collapse
expand_less
unfold_less
Collapse all
unfold_less
delete
Delete
delete
cloud_download
Download
cloud_download
assistant_direction
Directions
assistant_direction
edit
Edit
edit
expand_more
Expand
expand_more
unfold_more
Expand all
unfold_more
filter_list
Filter
filter_list
swap_vert
Group by
swap_vert
keyboard
Manually
keyboard
restart_alt
Reset
restart_alt
done
Save/Done
done
search
Search
search
play_arrow
Start
play_arrow
stop
Stop
stop
sync
Sync
sync
touch_app
Tap
touch_app
cloud_upload
Upload
cloud_upload
picture_as_pdf
View PDF
picture_as_pdf

Content

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

account_circle
Account
account_circle
assignment_turned_in
Assignment
assignment_turned_in
my_location
Address
my_location
person_pin_circle
Assignee
person_pin_circle
cake
Birthday
cake
block
Block
block
emoji_food_beverage
Break
emoji_food_beverage
highlight_off
Cancel
highlight_off
contact_mail
Contact
contact_mail
visibility
Check
visibility
auto_mode
Cleaning status
auto_mode
people_outline
Client
people_outline
error
Danger
error
event
Date
event
insert_drive_file
Document
insert_drive_file
widgets
Element
widgets
email
Email
email
groups
Employees
groups
cloud_queue
Empty state
cloud_queue
sports_score
Finish
sports_score
folder
Folder
folder
map
Geographic location
map
group_work
Group
group_work
history
History
history
home
Home
home
photo
Image
photo
info
Info
info
text_snippet
Instructions
text_snippet
cloud_sync
Integration
cloud_sync
inventory
Inventory
inventory
insights
Insights
insights
label
Label
label
language
Language
language
link
Link
link
lock
Locked
lock
nfc
NFC
nfc
notifications
Notifications
notifications
tag
Number
tag
location_city
Object
location_city
design_services
Object design
design_services
business
Organisation
business
picture_in_picture
Part
picture_in_picture
password
Password
password
pie_chart
Pie chart
pie_chart
policy
Policy
policy
lock
Login
lock
pause_circle
Pause
pause_circle
pending
Pending
pending
flag
Released
flag
comment
Remark
comment
tune
Role
tune
sensors
Sensors
sensors
settings
Settings
settings
sort_by_alpha
Sort alphabetically
sort_by_alpha
play_circle
Started
play_circle
stop_circle
Stopped
stop_circle
check_circle_outline
Success
check_circle_outline
supervisor_account
Supervisor
supervisor_account
support
Support
support
task_alt
Task
task_alt
schedule
Time
schedule
travel_explore
Timezone
travel_explore
title
Title
title
toggle_on
Toggle
toggle_on
airport_shuttle
Travel
airport_shuttle
place
Unit
place
circle
Unknown
circle
stars
User type
stars
movie
Video
movie
warning
Warning
warning
surfing
Work
surfing
calendar_month
Work schedule
calendar_month

Modules

Modules icons are used to identify the different modules.

account_circle
Accounts
account_circle
analytics
Analytics
analytics
fact_check
Checklists
fact_check
cleaning_services
Cleaning
cleaning_services
diamond
Quality
diamond
assignment
DKS/MKS
assignment
dashboard
Dashboard
dashboard
description
Files
description
content_paste
Forms
content_paste
campaign
Issues
campaign
date_range
Periodic Tasks
date_range
timelapse
Time Tracking
timelapse
receipt
Work Tickets
receipt

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

Emphasis

Emphasis can be made by using different colours to help distinguish hierarchy and states. On a light background icons in rested enabled state are Dark-Light and Primary-Base in active state. On darker backgrounds (such as in the toolbar) icons are Light-Light and are contained in a circle on hover.

Light background

dashboard
Disabled
Disabled icons on a light background are Light-Dark.
dashboard
Active Unfocused
Active Unfocused icons on a light background are Dark-Light in rested state.
dashboard
Active Hover
Active Hovered icons on a light background are contained in a Light-Base circle.

Dark background

dashboard
Disabled
Disabled icons are Primary 300 on a dark background.
dashboard
Active Unfocused
Active Unfocused icons on a dark background are White in rested state. Example: icons in the toolbar
dashboard
Active Hover
Active Hovered icons on a light background are contained in a Primary 400 circle.

Usage

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

Resources

We use the rounded icon set from Google Material Design.