Iconography

@tabler/icons-react only. Size by tier (size-3–size-8), scale with adjacent text, stroke=2 default.

Size scale

Five named tiers — pick one per context. Do not use arbitrary sizes between them.

xs

12pxstroke 1.75text-xsgap-1.5

Footer meta, external-link chevrons, facet chips

sm

16pxstroke 2text-smgap-2

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

md

20pxstroke 2text-sm / text-basegap-3

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

lg

24pxstroke 2text-base / text-lggap-3

Dock nav, carousel arrows, marketing rows

xl

32pxstroke 2text-lg+gap-4

Hero accents only — one per viewport region max

Scale with text

Label at xs tier
Label at sm tier
Label at md tier

xs + text-xs · sm + text-sm · md + text-sm/base — keep icon and copy on the same tier.

Scaling rules

  • Pick a tier

    Use size-3 through size-8 only. No arbitrary values (size-7, w-[18px], scale-110 on icons).

  • Match the label

    Icon tier follows adjacent text: text-xs → size-3, text-sm → size-4, controls → size-5.

  • Fit the control

    Icon-only buttons: container size-10 or size-11, icon size-5 inside. Never fill the whole hit area.

  • Keep stroke consistent

    stroke={2} for sm and up. stroke={1.75} only at size-3 or dense facet rows.

  • Inherit color

    Use currentColor via parent text-* tokens. Accent highlights only — no hex fills on SVGs.

  • Prevent squish

    Add shrink-0 on icons in flex rows so long labels do not compress the glyph.

Common icons

IconArrowRight
IconChevronDown
IconChevronLeft
IconChevronRight
IconCheck
IconSearch
IconX
IconShoppingCart
IconMapPin
IconVideo
IconBrush
IconFolder
IconDeviceTv
IconUser
IconEye
IconHeart
IconShare

App shell (by tier)

Navigation · lg (size-6)

IconBrush
IconFolder
IconDeviceTv
IconUser

Search · md (size-5)

IconSearch
IconCircleX
IconFilter

Engagement · sm (size-4)

IconEye
IconHeart
IconShare
Library & code snippetShow
  • @tabler/icons-reactAll UI icons — @wisihe/ui-react, app shell, marketing, search
  • Custom SVGBrand mark only (IconLogo)
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>

Do & don’t

Pick a size tier and match adjacent text. stroke={2} (1.75 at size-3). shrink-0 in flex rows. Use @wisihe/ui-react Button for actions.

Scale with text

Do

Search paintings

Don't

Search paintings

Color

Do

Read more

Don't

Read more

Icon-only controlInspect with a screen reader

Do

Don't

Inconsistent control

Do

Don't