Iconography

Icons are visual representations of commands, devices, directories, or common actions. Nova icons are simple and informative. Each icon builds on the visual language of the design system.

Banner Icons

Nova icons are an essential element of any interface, they are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics. Nova icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes.

Design principles

Icons are an essential element of any interface, packing an informative punch into a small form factor. To ensure consistency and readability, their limited size means that each icon must strictly adhere to guidance while still expressing essential characteristics:

  • Size and layout
  • Grid and keyline shapes
  • Corners
  • Stroke

Foundation Icons

Size and layout

Icons are displayed as 24 x 24 px. Create icons for viewing at 100% scale for pixel-perfect accuracy. Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).

Banner Icons sizes

Grid and keyline shapes

The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain consistent visual proportions across system icons.

Banner Icons grid

Corners

Corner radiuses are 2px by default. Interior corners should be square, not rounded. For shapes 2px wide or less, stroke corners shouldn’t be rounded.

Stroke

Icons use a consistent stroke width of 2px, including curves, angles, and both interior and exterior strokes.