Skip to content
Site volume
Colourway

Print kit

Shape glyph

One glyph of the shape alphabet: fill, outline, halftone or misregistered.

  • Beta
  • Expressive layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/print
On this page

The shape alphabet as a component. In controls a glyph is reading layer and takes fill or outline only; in art any variant. The 3D twins read the same paths.

Example#

Look of this example
Live render of examples/shape-glyph/basic.tsx

Usage#

Use a shape glyph for any shape from the alphabet: an icon beside a word, a line's glyph, art at any size. In controls it is an icon (fill or outline only); as art it can be screened in halftone or printed misregistered.

  • Grid. The 16 grid draws at 16 px and below, the 18 grid above; pass grid to choose.
  • Variants. fill (default), outline, halftone and misregistered; the last two are art only.
  • Meaning. A glyph never carries a status alone: it sits with a word or carries a title (R3 rule 10).

Layer and volume#

Icons look the same at every volume. Art variants follow the texture rules: the halftone prints solid at Quiet, the misregistered plate sits in register at Quiet and under more contrast.

Anatomy#

The parts of examples/shape-glyph/basic.tsx, numbered:
  1. IconA named glyph with a title, at 24 px.[data-mk-glyph]
  2. Halftone artThe same shape, screened..mk-shape-glyph-screen

Volume#

  • Quiet

    Icons identical; halftone prints solid.

  • Studio

    Art variants follow the texture rules.

  • Press

    The same.

  • Rave

    The same.

Content#

  • A glyph with a meaning has a title or a word beside it: "Growth".

Do and don't#

Do

Growth

The shape and the word.

Don't

A shape asked to mean something alone.

Shapes help colour-blind readers tell lines apart, but only next to the name. Alone, a triangle is just a triangle.

Accessibility#

  • Named by title (role="img"), otherwise aria-hidden.
  • A glyph never carries a status alone: it sits with a word or a title.

Props#

PropTypeDefaultDescription
name requiredGlyphNamenone
grid16 | 18noneOptical size; default by `size` (≤ 16 px → 16).
sizestring | number18px number or a CSS length (default 18).
titlestringnoneNames the glyph (`role="img"`); otherwise `aria-hidden`.
inkInkRefnone
variantShapeGlyphVariantnone
classNamestringnone

Generated from ShapeGlyphProps in packages/overprint-react/src/print/shape-glyph.tsx.

Tokens#

System tokens (5)

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe print and comic kits, P0 (21 P2-T11 to P2-T15): the art core (seeded halftone, bursts, balloons, lines, krackle, printer's marks, SFX layers, the texture tiles and gen-print-tiles), the print kit (Halftone, Overprint, PrinterMarks, Sticker, Stamp, Seal, useStampLand, Tape, Grain, Misregistration and the .mk-ov second ink, GiantGlyph, ShapeGlyph), the data Cover (grid and score, coverAlt, CoverLegend), the comic registers and kit (Panel, PanelGrid, Balloon, Caption, CornerBox, EditorsNote, ContinuedIn, SFX, SfxBurst, SpeedLines, FocusLines, ImpactStar, KeyPop).