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:

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:

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

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.