New Delhi · September 2026
Preceda

04 Icons

Icons

Printed-rule line drawings on a 24 grid: the set at 16, 20 and 24, and how to use it.

§ The set

36 drawings, one weight.

A 24 grid, 1.5 stroke, butt caps and mitred joins, drawn in currentColor. Each is shown at 16, 20 and 24.

  • attach
  • send
  • close
  • plus
  • minus
  • check
  • chevron-down
  • chevron-up
  • chevron-left
  • chevron-right
  • back
  • menu
  • more
  • search
  • external
  • copy
  • download
  • share
  • link
  • lock
  • sealed
  • document
  • draft
  • authority
  • fact
  • calendar
  • clock
  • user
  • settings
  • sign-out
  • theme
  • edit
  • trash
  • warning
  • info
  • drag-grip

01

Icon

Icons are printed-rule line drawings: one weight, square ends, no fills except dots. They label an action beside a word or stand in for a word that is universally read; they never decorate.

Anatomy

.preceda-icon
The SVG. Inline-block, sized by modifier, coloured by currentColor.
.preceda-icon--16|20|24
Rendered size. 20 is the default beside 14–15px text; 16 in dense metadata; 24 for standalone controls.
icons.svg#preceda-icon-<name>
The sprite symbol for CSS-only consumers (<use href>).

Variants

Beside text

Decorative: the word carries the meaning, the icon is hidden from assistive technology.

Paper

Open in reporter 41 s

Lamp

Open in reporter 41 s

Standalone

Labelled: role="img" with an accessible name, inside a control that has its own name.

Paper

Lamp

Accessibility

  • Without label the icon is aria-hidden and not focusable; with label it is role="img" with aria-label.
  • An icon-only control still needs a name on the control itself; icon buttons arrive in T3.
  • Icons inherit currentColor, so they meet the contrast of the text they sit in.

Do

  • Pair an icon with a word unless the glyph is universally read (close, more, search).
  • Use 16 beside small text, 20 beside body and UI text.

Don’t

  • Draw a new icon inline; add it to src/icons/index.ts.
  • Fill, colour or animate an icon to signal status.

Usage

HTML
<svg class="preceda-icon preceda-icon--20" aria-hidden="true">
  <use href="/node_modules/@luvkapur/preceda-design-system/dist/icons.svg#preceda-icon-attach"/>
</svg>
React
import { Icon } from '@luvkapur/preceda-design-system/react';

<Icon name="attach" size={16} />            // decorative
<Icon name="close" size={24} label="Close" /> // labelled