Iconography

@tabler/icons-react — five size tiers (size-3–size-8), stroke=2, shrink-0 in flex rows.

Size scale

Footer meta, external-link chevrons, facet chips

Inline with body copy, links, @wisihe/ui-react button icons

Default — nav controls, search fields, size-10 icon buttons

Dock nav, carousel arrows, marketing rows

Hero accents only — one per viewport region max

Common icons

IconArrowRight

IconChevronDown

IconCheck

IconSearch

IconX

IconBrush

IconFolder

IconUser

SnippetShow

import { IconArrowRight, IconSearch } from '@tabler/icons-react';
import { Button } from '@wisihe/ui-react';

// sm — inline with text-sm
<p className="flex items-center gap-2 text-sm">
  <IconArrowRight className="size-4 shrink-0" stroke={2} aria-hidden />
  Read more
</p>

// md — default control
<button type="button" className="inline-flex size-10 items-center justify-center" aria-label="Search">
  <IconSearch className="size-5 shrink-0" stroke={2} aria-hidden />
</button>

// @wisihe/ui-react — icon size handled by Button
<Button variant="primary" Icon={IconArrowRight} iconPosition="right">
  View work
</Button>

@tabler/icons-reactAll UI icons — @wisihe/ui-react, app shell, marketing, search
Custom SVGBrand mark only (IconLogo)

Do & don’t

Scale with text

Search paintings

Don't

Search paintings

Icon-only control

Don't

Color

Don't