Iconography
Six geometric icons support common actions. Pair them with labels and leave the brand symbol its own role.
Six icons with shared proportions
Book, Search, Play, Check, Arrow and Add use a 24px source grid and a 2px optical stroke. Preserve open gaps and consistent optical alignment.
In practice
ReadSearchAdd lessonAlign the icons by their optical centers. Leave 8px between each icon and its label.
Ideas become useful when they connect.
Play lesson previewThe play metaphor belongs to the learning action, not to the brand signature. A visible label supplies the meaning.
The icon supports the field label. Instructions remain readable even when the decorative icon is hidden.
Inspect useful geometry
book / 24pxsearch / 24pxplay / 24pxcheck / 24pxarrow / 24pxadd / 24pxUtility icons explain actions. They never replace the identity mark. This is a finite local preview, not media playback.
Rules and source
One useful metaphor
Book, Search, Play, Check, Arrow and Add use a 24px source grid and a 2px optical stroke. Preserve open gaps and consistent optical alignment.
Contrast and meaning
Use Navy on light surfaces and White on Navy. Reduced opacity is only for inactive decoration. State needs a label or shape, never color alone.
Do
Pair meaningful icons with concise, visible labels.
Don’t
Do not plug the counters or substitute an icon for the master logo.
Open editable Figma sourceSource pages 23