Irozon Design System — design foundations, tokens and components by Irozon AB.
Irozon — Design System
Irozon Design System · v1.0
Foundations / Icons

One quiet, consistent line language for Irozon interfaces.

Irozon products use Tabler Icons as the canonical UI icon system. The completed Irozon Tools migration is the reference implementation: individual outline icons from @tabler/icons-react, with 16 / 20 / 24px sizing, currentColor and accessible controls.

Canonical package

Use the version already proven in Irozon Tools.

@tabler/icons-react · v3.46.0
Library

Import only the icons a surface needs.

Import named outline icons directly. Do not import the entire icon namespace; the individual import keeps usage explicit and avoids bringing an unnecessary catalog into a product bundle. 

import {
  IconHome,
  IconSettings,
  IconSearch,
} from "@tabler/icons-react";

Canonical style

  • Use Tabler's normal outline icons. Do not mix outline and fill styles arbitrarily.
  • Keep the normal/default stroke treatment consistent; do not vary stroke widths between icons.
  • Tabler Icons are for interface icons, not brand identities.
Sizing & treatment

Three sizes cover the interface.

Choose a size from the component context. Icons should align optically with adjacent text and controls, while the component keeps ownership of spacing.

16px
Compact or small controls, inline metadata and tight utility actions.
20px
Default UI icon size: buttons, navigation items, inputs and common actions.
24px
Large or feature icons that need a little more visual presence.
currentColor
Icons inherit the semantic color of their button, navigation item, link, state or theme.

Avoid arbitrary sizes unless a component genuinely requires one. Preserve the component's existing spacing rather than adding icon-specific margins.

Component examples

Let the component own the layout.

The React examples below use Irozon's existing Button and NavItem APIs. The inline previews show the same semantic behavior in the documentation site's framework-neutral markup.

Labeled button

The icon is decorative because the visible label already names the action.

import { Button } from "@irozon/design-system-react";
import { IconPlus } from "@tabler/icons-react";

<Button>
  <IconPlus size={20} aria-hidden="true" />
  Add item
</Button>

Icon-only button

An icon-only control must provide its accessible name explicitly.

import { IconTrash } from "@tabler/icons-react";

<Button variant="destructive" iconOnly aria-label="Delete item">
  <IconTrash size={20} aria-hidden="true" />
</Button>

Navigation state

A Tabler icon inherits currentColor from its navigation item, so icon and label resolve together in the same state and theme.

Canonical active treatment: a straight vertical green accent on the outer edge of the nav item, separate from the square icon slot. Do not use a rounded or bracket-style accent around the icon. 

import { NavItem } from "@irozon/design-system-react";
import { IconHome } from "@tabler/icons-react";

<NavItem active icon={<IconHome size={20} aria-hidden="true" />}>
  Home
</NavItem>
Accessibility

Meaning belongs to the control, not the shape.

Use icons to reinforce interface meaning without making people decode the UI.

  • Icons inside labeled buttons and links are normally decorative: use aria-hidden="true".
  • Icon-only controls need an accessible label such as aria-label="Delete item".
  • Do not rely on an icon alone for important or destructive meaning when text is appropriate.
  • Keep the icon aligned with the adjacent label; do not use arbitrary margins to correct a component's spacing.
Brand exceptions

Tabler is for interface icons, never brand identities.

Keep marks that identify a company, product or platform as the official asset for that brand. Do not replace them with an approximate Tabler icon.

Use the official asset
Irozon logo · product logos · Google · LinkedIn · Facebook
WordPress · npm · other third-party brand marks

Brand marks keep their canonical shape, proportions and recognition.

Do not substitute
IconBrandApproximation

Tabler's interface glyphs are not replacements for official identity assets.