Components

Page Icon

A page’s icon: emoji, icon or image, with the default page glyph when none is set. Sized for sidebar rows, table cells, callouts and page titles.

Usage

Use it to:

  • show a page’s icon in navigation, tables, links and titles

Don’t use it to:

  • general UI icons (use Icon)
  • people (use Avatar)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/PageIconExample.tsx
import { PageIcon } from '@krackedui/motion';

export function PageIconDemo() {
  return (
    <>
      <PageIcon />
      <PageIcon emoji="📘" />
      <PageIcon icon="book" />
    </>
  );
}

Examples

Sources

Size

Dark theme

API Reference

PageIcon

A <span>; supports all of its props. Precedence: emoji, then src, then icon, then the default glyph. Adds:

PropTypeDefault
emoji
string
icon
IconName
src
string
size
161820222478
20
empty
boolean
false
interactive
boolean
false

Accessibility

  • Decorative by default (it sits next to the page title). Pass aria-label to make it an image with a name.
  • interactive only changes styling; put it inside a <button> with a label when it opens a picker.
© 2026 Motion. Internal documentation.