Iconography

Overview

Integral icons are implemented as React components using SVG for crisp rendering at any size. Icons are designed to inherit the current text color, so they naturally match surrounding UI (buttons, links, headings, etc.).

State + color inheritance

Integral icons do not implement their own hover/pressed/disabled styling. Instead, they inherit color (and therefore state treatments) from whatever they’re placed inside.

• The icon wrapper sets color: inherit (so it takes the parent’s computed color).
• Each SVG glyph uses fill="currentColor" (so it renders using that inherited color).

This means you typically get the right behavior “for free”:

• Put an icon inside an Integral Button and it will follow the button’s hover/pressed/disabled text color.
• Put an icon inside a link and it will follow the link’s hover/active color, as long as the link changes color.

Usage examples

Icon + label

Use icons as decorative elements to enhance the meaning of the label, which already communicates the meaning.

Primary button with icon

Primary buttons use an on-dark text color. Because icons inherit color, the icon automatically matches the label and updates across hover/pressed/disabled states.

Icon-only button

If the button has no visible label, ensure the button has an accessible name (e.g. aria-label). The icon can remain decorative.

Meaningful icon (with title)

If an icon conveys meaning without accompanying text, pass a title. In this codebase, icons are treated as decorative by default (they set aria-hidden when title is empty), and become meaningful when a non-empty title is provided.

Icon catalog

Import

import { ChevronRightIcon } from '@im/integral-icons';

export function Example() {
  return <ChevronRightIcon />;
}

Props

All Integral icons share the same props (IconProps).