Skip to content
Site volume
Colourway

Foundations

Icons and the shape alphabet

One icon set, drawn on two grids. Eight shapes form the alphabet, and each has a twin in the 3D blocks.

  • Experimental
On this page

Overprint has one set of shapes for everything: icons in controls, marks for the lines of work, cover art and the blocks (D-G2, D-B11). They are filled shapes, named for what they look like, never for what an app means. Strokes appear only where a shape is a line: rings, the lens, the check, arrows and chevrons.

The alphabet#

Eight shapes, each with a 3D twin in the block pile: circle, half circle, triangle, square, bars, diamond, crescent and arch.

  • circleWebsites
  • half-circle
  • triangleGrowth
  • square
  • barsSoftware
  • diamondCustom apps
  • crescent
  • arch

The same shapes pushed into depth, as the blocks print them:

Look of this example
Live render of examples/block-css/twins.tsx

Lines of work#

Each line has a shape, so its meaning survives colour blindness and print (D-C2): Websites circle, Growth triangle, Software bars, Custom apps diamond and MAX//OS slash. They always travel with the line's letter or name.

Every glyph#

  • circleWebsites
  • half-circle
  • triangleGrowth
  • square
  • barsSoftware
  • diamondCustom apps
  • crescent
  • arch
  • quarter-circle
  • play
  • ring
  • star
  • stack
  • door
  • slashMAX//OS
  • spark
  • disc
  • slab
  • flag
  • grid
  • branch
  • pair
  • frame
  • gauge
  • lens
  • ring-dot
  • arrow-right
  • arrow-left
  • arrow-up
  • arrow-down
  • arrow-up-right
  • chevron-down
  • chevron-up
  • chevron-left
  • chevron-right
  • close
  • menu
  • plus
  • minus
  • check
  • search
  • mail
  • phone
  • map-pin
  • calendar
  • clock
  • pause
  • sound-on
  • sound-off
  • theme-bone
  • theme-night
  • volume
  • info
  • error
  • attention
  • copy
  • link
  • download
  • drag
  • undo

Two grids#

Every glyph is drawn on an 18-unit grid for 17 px and up, and on a 16-unit grid for 16 px and below, where details would blur. Strokes are 2 units on 18 and 1.75 on 16, with butt caps and miter joins, in currentColor.

In code#

  • Icon components: import { CheckIcon } from "@maxgrits/overprint-react/icons/check", one module per glyph, server-safe.
  • Raw SVG: @maxgrits/overprint-react/icons/svg/check.svg.
  • Any shape at any size, including art variants: ShapeGlyph.
  • A glyph never carries a status alone: it sits with a word or carries a title.