Skip to content
TopClass UI

Icons

The built-in icons, by name, and the ones that flip on their own in Arabic.

The set

Phosphor at regular weight, plus three solid variants where a filled shape carries meaning.

Group, Count, What it covers
GroupCountWhat it covers
Arrows and carets13Every direction, plus the double carets pagination needs
Actions19Copy, edit, delete, download, search, filter
Status and feedback13One icon for each of the six tones, plus a spinner
Objects and places36Files, folders, users, devices, brands
Solid variants3Filled shapes, where the fill carries meaning

The whole set

All 84, grouped. Amber marks a directional icon - it mirrors itself in Arabic.

84 results

  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional
  • Directional

Two ways to render

Icon takes a name and resolves it on the server. Svg takes an imported icon object and works anywhere.

This is what keeps unused icons out of your bundle. One big map would pull them all in.

Wrong
'use client'
import { Icon } from 'topclassui/icon'

// server-only, so this fails at build time
<Icon name="spinner" />
Right
'use client'
import { Svg } from 'topclassui/svg'
import { spinner } from 'topclassui/icons/spinner'

<Svg icon={spinner} />

Sizes

Icon defaults to 1em so it matches the text beside it. Use a size name when it stands alone.

Name, Pixels, Where it fits
NamePixelsWhere it fits
(default)1emInline with text - a key cap, a link, a button label
xs16A dense table row
sm20A control at sm
md24A control at md
lg32An empty state
xl40A feature block

What flips in right to left

16 of the 84 mirror in right-to-left. Direction means something for an arrow, not for a magnifying glass.

Flips

Every arrow and caret, plus sign-out, paper-plane-tilt and sidebar-simple.

Does not flip

magnifying-glass, check-circle, gear, clock. A mirrored clock is a broken clock.

Why a list

A name is not a reliable signal. arrow-square-out flips; arrows-clockwise does not.

Adding icons

Any single-path SVG works with Svg: give it the viewBox and the path.

my-logo.tsx
import { Svg } from 'topclassui/svg'
import type { IconData } from 'topclassui/icons'

// one of your own, no CLI needed
const myLogo: IconData = {
  viewBox: '0 0 24 24',
  path: 'M12 2 22 12 12 22 2 12Z',
  directional: false,
}

export const Logo = () => <Svg icon={myLogo} size="md" />
NextTheming