Iconography

Icons are powerful visual helpers, and should be used with care. Icons are visual representations of commands, files, devices, directories, or common actions and are used to provide visual context and enhance usability.

Icons should have a clear purpose, using the same icon for multiple uses can quickly dilute the meaning and add confusion.

Best practices

  • Icons are on a 20px grid and exported with padding on a 24px art board.
  • When scaling down icons, smaller elements like circles should be solid to help with legibility.
  • Icons should always match the text colour they are accompanying to create a clear relationship. Primary navigation and badges don’t need to follow this convention.
  • If the copy and icon have different heights always vertically centre align them.
  • Any spacing above or below should be measured from the largest component i.e. if the icon is 20px high and the copy is 16px high the spacing should be measured against the icon.

Implementation

If you're developing in the platform, you'll want to use the Icon component. See here for documentation on this component.

Status Icons

These icons are used to display the status of resources across Kalo, such as Projects, Tasks, and Invoices

access_time
content_paste
done_all
error_outline
local_atm
loop
send

Social Icons

dribbble
instagram
linkedin
twitter
youtube

Full set

access_time
account_balance
account_balance_wallet
account_box
account_circle
add
add_a_photo
archive
arrow_drop_down
arrow_drop_down_circle
arrow_drop_up
art_track
assignment
assignment_ind
attach_file
attach_money
autorenew
book
border_color
chat
check
check_box
check_box_outline_blank
check_circle
check_circle_outline
chevron_left
chevron_right
clear
close
comment
content_paste
create
credit_card
date_range
delete
domain
done
done_all
dribbble
edit
email
error_outline
exit_to_app
extension
file_upload
file_xls
folder_shared
format_color_fill
globe
group
help_outline
highlight_off
how_to_reg
info
info_outline
insert_drive_file
instagram
kalo_admin
kalo_categories
kalo_clients
kalo_finance
kalo_index
kalo_messages
kalo_premium
kalo_projects
kalo_reporting
kalo_tasks
kalo_verified
keyboard_arrow_down
keyboard_arrow_left
keyboard_arrow_right
keyboard_arrow_up
keyboard_return
launch
link
linkedin
local_atm
local_offer
location_city
location_on
lock
loop
mail
megaphone
message
mode_edit
monetization_on
more_vert
note_add
notifications
open_in_new
payment
people
perm_contact_calendar
perm_identity
person
person_add
person_outline
phone
picture_as_pdf
playlist_add_check
present_to_all
question_help_message
radio_button_checked
receipt
remove
remove_circle
remove_red_eye
search
security
send
settings
short_text
star
swap_vert
tv
twitter
verified_user
view_headline
view_module
view_week
warning
website
youtube
rates