1-Bit Icon Design
1ビットアイコン / 1982–1990s / Technique / UI Expression
The way of drawing icons in nothing but black and white that Susan Kare established for the Macintosh. She worked each design out on graph paper with one square standing for one pixel, and restated commands as ordinary objects, a pair of scissors for cutting and a bin for deleting, so the set could be read without a caption in any country. Her sketchbook now sits in a museum collection.
At a glance
Visual cues
- Two values only, black and white, with gray standing in as a checkerboard of alternating dots
- A one pixel outline closing each shape, and an interior that is either solid or dotted, never shaded
- Ordinary objects, scissors, a bin, a sheet of paper, standing in as the names of commands
- Visible traces of one dot placed per grid square, so diagonals break into steps
Best used for
- Making small pictorial signs stand for commands with no caption, and read the same way in any language
- Getting shapes to stay distinguishable inside a small frame that cannot be scaled or smoothed
Use this style
Take the compact brief into a project or hand the structured version to an AI tool.
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats
Dictionary entry
- Type
- Keep letters out of the picture and put the label on a separate line outside it. Any type alongside sits on the same bitmap grid, with no italics and no ornament.
- Composition
- Rule the grid first and draw with one square standing for one pixel. Close the outline before deciding the interior, and leave one square of clearance inside the frame.
- Material
- Two colours only, black and white. When a middle brightness is needed, build it by thinning the dots into a checkerboard rather than introducing gray. Leave diagonals as steps and do not smooth them.
- Caution
- Adding gray or midtones to widen the range costs you the hard outline that only two values can produce, and the shape stops being legible at the size it is actually used.
- Further study
- the record of Kare's original drawing books jointly acquired by MoMA and SFMOMA / how far the idea of restating commands as everyday objects carried without explanation / the use of a two value checker to build midtones, and its limits
Related entries
- Pictogram System (案内用ピクトグラム)Shared effects: Technique / Intimacy.Compare 1-Bit Icon Design and Pictogram System
- Pixel Art (ピクセルアート)Shared effects: Play / Technique.Compare 1-Bit Icon Design and Pixel Art
More from UI Expression
Continue through styles in the same UI Expression family, prioritised by shared effects.
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Shared effects: Intimacy / Play.
- Claymorphism (クレイモーフィズム)Shared effects: Intimacy / Play.
- Diegetic UI (ダイエジェティックUI)Shared effects: Play / Technique.
Browse all UI Expression entries
Cite this entry
The dictionary is meant to be linked to. Take whichever form fits where you are writing.
- Link
- https://indexstyle.org/styles/one-bit-icon
- Markdown
- [1-Bit Icon Design — IndexStyle](https://indexstyle.org/styles/one-bit-icon)
- HTML
- <a href="https://indexstyle.org/styles/one-bit-icon">1-Bit Icon Design — IndexStyle</a>