Icons
Contents
Introduction
Icons are the graphical elements that we use to represent actions or concepts. With them, we aim to communicate ideas at a glance, add interactivity, and draw attention to important information. The Mosaic icons are based on the Icons8 Fluency set. These are designed to be simple, modern, and friendly.
Types
We use outlined and coloured versions of the Fluency set.
Outlined
The outlined icons are used as the main style in Mosaic. These are typically found in the navigation, sidebar, and action buttons. Filled icons are secondary and are occasionally used to show the toggled state of an icon.
| Home | Favourites | Desks | Apps | Tasks | Store |
|---|---|---|---|---|---|
 |  |  |  |  |  |
Coloured
The coloured icons should only be used in the body or content of applications. These provide a splash of colour and also inject a dash of personality.
| Home | Favourites | Desks | Apps | Tasks | Store |
|---|---|---|---|---|---|
 |  |  |  |  |  |
Sizes
Mosaic uses icons at 16px, 24px, 32px, 48px, and 64px.
| 16px | 24px | 32px | 48px | 64px |
|---|---|---|---|---|
 |  | |  |  |