Icon (c-icon) · MCSS-Lite

Pick this part

Pick c-icon for

Next to a label, to help people scan: a download button, an external link.
Inside a severity tile in c-alert, where each tone has its own shape.
An icon-only button, with an accessible name on the button.

Pick another part for

As the only way to show meaning when a word would do: write the word.
For decoration that repeats a nearby label; leave it out.

Build it

Start with <svg> and add class="c-icon".
Pick at most one size modifier: --sm, --lg.

Pajamas docs

Show markup 13 lines

<div class="l-cluster">
  <button type="button" class="c-button">
    <svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-download"></use></svg>
    Download the invoice
  </button>
  <a class="c-button c-button--ghost" href="https://design.gitlab.com/">
    Pajamas docs
    <svg class="c-icon c-icon--sm" aria-hidden="true" focusable="false"><use href="#mcss-icon-external-link"></use></svg>
  </a>
  <button type="button" class="c-button" aria-label="Copy the API key">
    <svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-copy"></use></svg>
  </button>
</div>

The set

Every icon in dist/mcss-lite.icons.svg, at the large size (c-icon--lg). Reference one with <use href="#mcss-icon-name">.

arrow-right
check
chevron-down
chevron-left
chevron-right
chevron-up
close
copy
download
edit
error
external-link
info
menu
minus
plus
search
success
trash
warning

Check your build

Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.

Fits

Hide a decorative icon from screen readers; the button text names the action.

Show markup 4 lines

<button type="button" class="c-button">
  <svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-download"></use></svg>
  Download the invoice
</button>

validate: 0 issues

Doesn't fit

Don't leave an icon exposed and unnamed: screen readers announce an unlabelled image, or nothing.

<svg class="c-icon"><use href="#mcss-icon-download"></use></svg>

validate

warning c-icon needs aria-hidden="true" when it is decorative, or role="img" and aria-label when it carries meaning on its own. [a11y]

Fits

Give an icon-only button its name with aria-label.

<button type="button" class="c-button" aria-label="Copy the API key">
  <svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-copy"></use></svg>
</button>

validate: 0 issues

Doesn't fit

Don't invent icon names: an unknown symbol draws nothing.

<svg class="c-icon" aria-hidden="true"><use href="#mcss-icon-rocket"></use></svg>

validate

error There is no icon "rocket". Icons: arrow-right, check, chevron-down, chevron-left, chevron-right, chevron-up, close, copy, download, edit, error, external-link, info, menu, minus, plus, search, success, trash, warning. [unknown-icon]

Spec sheet

Apply to <svg>

Modifiers
Class	Group	What it does
`c-icon--sm`	size (pick one)	16px, for dense text and small buttons.
`c-icon--lg`	size (pick one)	24px, for alerts and empty states.

Tokens
Token	Value (light / dark)
`--icon-size`	`1.25rem`
`--icon-size-sm`	`1rem`
`--icon-size-lg`	`1.5rem`

Accessibility

Decorative icons: aria-hidden="true" and focusable="false".
Meaningful icons with no visible text: role="img" and aria-label on the <svg>.
Severity must never rely on an icon alone; pair it with text.

Icon c-icon