Overview

Kolibri products use a large number of icons that have a special meaning within our ecosystem. They generally draw from Material Icons, but may also include custom icons.

Importantly, we reference icons by a token specific to the Kolibri Design System rather than Material's names, in order to make token references more meaningful to designers and developers.

You can use the KIcon and KLabeledIcon components to easily insert any icon. Some other components such as links and buttons also provide props as shortcuts for easily inserting icons by token name.

Size and text

Icons should be scaled relative to their surrounding text size. Use the KLabeledIcon component to automatically set a consistent sizing and spacing with associated text:

Header 3

Header 4

Header 5

Color

Many of these icons also are used with conventional colors in the design system. For example, the coachContent icon is often shown using the coachContent color, e.g. . Icons often have a default color associated with them, and this can be overridden as needed.

When inline with text, icons should usually be the same color as the text:

Do

Awesome video

Don't

Awesome video

There are exceptions to this pattern, however. For example in the columns of coach reports, most text is dark gray for readibility color while the icons for Mastered, In-progress, etc are colored.

Internationalization

Avoid using icons that are culture- or context-specific.

Icons which in some sense relate to the passage of time must be mirrored when viewed in a right-to-left language. Read more about icon bidirectionality from the Material design guidelines.

When used with the KIcon component, icons will be automatically flipped when appropriate.

Accessibility

If it is not purely decorative, ensure that the icon or its parent component has associated text that can be read by a screen reader.

Icons

These icons have special meaning in Kolibri products

General aliases

add
alternativeRoute
app
html5
audio
back
bookmark
bookmarkEmpty
channel
check
checked
chevronDown
chevronLeft
chevronRight
question
view
chevronUp
classes
clear
close
clipboard
coach
collapseAll
collection
copy
crop
dashboard
data
reports
delete
device
deviceInfo
disconnected
document
dot
download
dragHorizontal
dragVertical
dropdown
edit
email
emptyTopic
exercise
facility
filterList
forward
forwardRounded
fullscreen
fullscreen_exit
generateThumbnail
group
help
history
home
image
slideshow
indeterminateCheck
info
language
learn
lesson
list
login
logout
menu
minus
move
myLocation
openNewTab
optionsHorizontal
optionsVertical
pdf
people
permission
permissions
person
plus
print
profile
projects
quiz
radioSelected
radioUnselected
recommended
redo
refresh
registered
remove
resourceList
restart
save
schedule
search
settings
sidebar
star
starBorder
systemUpdate
topic
trash
tune
unchecked
undo
unlistedchannel
video
warning

Aliases with default colors

a11y
coachContent
correct
onDevice
done
error
helpNeeded
hint
incorrect
incorrectReport
infoPrimary
inProgress
mastered
notStarted
pointsActive
pointsInactive
rectified
registeredKDP
superadmin
unpublishedChange
unpublishedResource
warningIncomplete

Learning activities

allActivities
createShaded
createSolid
interactShaded
interactSolid
listenShaded
listenSolid
practiceShaded
practiceSolid
readShaded
readSolid
reflectShaded
reflectSolid
watchShaded
watchSolid

Custom icons

If the default Material icon library and/or community-contributed libraries are insufficient, use Material's icon creation guidelines to create a new one.

Usage in documentation

For use in documentation such as the Kolibri User Docs, all icons above have substitutions available in reStructuredText replacement syntax below:

Copy and paste it into a file such as rstIconReplacements.txt and then add it to your conf.py file like this.

Then in *.rst files you can use, for example, |video| to insert the video icon. Note that these icons will not have screen-reader-accessible labels associated with them, so they should always be accompanied by descriptive text.