Iconography

Our iconography serves to visually communicate categories, ideas and services in our digital touch points. Please follow this page to view our icon library and understand how they have been created.

To make our icons feel like they are a part of our visual identity, we have captured the stencil bridges that are present in our logotype. The construction of our icons is relatively simple, allowing us to continuously expand our library for future ideas, categories and services.

For best results when applying our icons, we recommend that the icon container is 24px.

Construction

Our iconography has been constructed in a 24x24px grid, used as a guide to make all of our icons look cohesive at a small size. The stroke weight of our icons are 2px at 100% scale however, when creating new icons, we work at 1000% scale for a higher degree of precision. Therefore when designing new icons, please use a stroke weight of 20px for both the stroke and the stencil gap.

An icon built on the grid. The animation loops.

The 24 px container.

Every file here is a 24 viewBox with its fills set to currentColor, so an icon takes the colour of the text around it and needs no variant per theme. Size comes from the container, never the file. The set is drawn as filled outlines rather than strokes: a stroke-only path comes out solid when the fills are rewritten, so what the design file draws at a 2 px stroke ships here as an outlined shape of the same weight.

The registry

Every icon in the set, with its name and category. To recolour, resize or export one, use the Icon Library.

All of it is BlackDoctor's, drawn in the design file and exported to a 24-unit box. Nothing here is borrowed and nothing is standing in. One icon is the exception: close-large is derived rather than drawn — close-small, close and close-large are one mark at three sizes, each two units wider a side than the last, and the largest continues the step the first two set.

Arrows

Chevrons

Actions

Navigation

Media

Feedback

Health

Social

Interface