Skip to content
Tattva

Pictogram

Stable

A one-color line icon, larger than a button icon, for small areas and lists of features.

Also known as icon illustration, symbol

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Sizes

The lines get thicker as the picture grows, so it looks balanced at each size.

UsageCodeDesignAccessibility

When to use it

A line drawing larger than an icon, for spots where a full illustration is too much. It takes the color of the text around it.

Use it for

  • A row or grid of things the assistant can do.
  • A small empty area where a full drawing would not fit.
  • Beside a heading, to mark its topic.

Not for

Do and avoid

Documents

Ask about any file your team shares.

Do. A line drawing above a feature name helps people scan.
Avoid. A large drawing squeezed into a button looks blurry and heavy.

Do

  • Put a visible label beside it.
  • Use it in small empty areas where a full drawing would crowd the words.
  • Use one size within a group.

Avoid

  • Do not use it as a button icon. Use a small icon.
  • Do not fill its shapes. Pictograms stay as lines.
  • Do not add any color except the text color.

On a phone

  • Pictogram is a fixed 32, 48 or 64px and looks the same on a phone.
  • It is not tappable. If it starts something, wrap it in a button, which gets a 44px target on touch screens.

Seen in products

  • Carbon's pictogram contribution page says pictograms are built on the icon grid with a 32 x 32 artboard and 1px of padding, which leaves 30px usable.
  • Carbon snaps pictograms to the pixel grid, keeps strokes as strokes, and delivers them solid black so they can be recolored in code.
  • A search snippet gives Carbon's stroke scaling as 0.72 at 32px, 1.08 at 48px, 1.44 at 64px, 1.8 at 80px and 2.16 at 96px.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started