Are the ai2 Icon breadcrumbs free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Do they respect reduced motion?

Yes. Under prefers-reduced-motion, there is no motion to reduce.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Icon breadcrumbs

Five breadcrumbs that put a mark in front of each crumb: a house on the root, a folder tree, numbered steps, tinted icon badges and a depth-aware mixed set. Every mark is decorative and hidden from screen readers, so the label still carries the meaning. Each is sized, token-driven and marks the current page with aria-current.

BreadcrumbIcon

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/breadcrumb-icon

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install lucide-react

Copy the source

components/ui/breadcrumb-icon.tsx

"use client"

import type * as React from "react"
import {
  ChevronRight,
  Component,
  FileText,
  Folder,
  FolderOpen,
  Home,
  LayoutGrid,
} from "lucide-react"

import { cn } from "@/lib/utils"

/* Icon breadcrumb family: 5 leading-icon strategies. The separator is always a chevron; what changes is the marker at the start of each crumb (home, folder, step number, badge, mixed depth icon). The icons are aria-hidden - the meaning lives in the label. Colour comes ONLY from tokens (alpha via color-mix), the size is a text scale plus gap. The last item is the current page (aria-current), not a link. Deterministic, no motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

type Crumb = { label: React.ReactNode; href?: string }

type Props = {
  className?: string
  size?: StyledSize
  items?: Crumb[]
}

const trail: Record<StyledSize, string> = {
  sm: "gap-1.5 text-xs",
  md: "gap-2 text-sm",
  lg: "gap-2.5 text-sm",
  xl: "gap-3 text-base",
}

const defaultItems: Crumb[] = [
  { label: "Home", href: "#" },
  { label: "Components", href: "#" },
  { label: "Button" },
]

const link =
  "inline-flex items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none"

const current =
  "inline-flex items-center gap-1.5 font-medium text-foreground [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none"

const sep =
  "flex items-center text-muted-foreground/60 [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-sm [&>i]:leading-none"

function Sep() {
  return (
    <span className={sep} aria-hidden="true">
      <ChevronRight />
    </span>
  )
}

/* Shared shell: leading returns a marker for each crumb (no icon when null). */
function IconTrail({
  className,
  size = "md",
  items,
  leading,
}: Props & { items: Crumb[]; leading: (i: number, last: boolean) => React.ReactNode }) {
  return (
    <nav data-slot="styled-breadcrumb" aria-label="Breadcrumb">
      <ol className={cn("flex flex-wrap items-center", trail[size], className)}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          const mark = leading(i, last)
          return (
            <li key={i} className="inline-flex items-center gap-1.5">
              {last || !item.href ? (
                <span className={current} aria-current="page">
                  {mark}
                  {item.label}
                </span>
              ) : (
                <a href={item.href} className={link}>
                  {mark}
                  {item.label}
                </a>
              )}
              {!last && <Sep />}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

/* Home: only the first crumb carries a home icon, the rest is plain text. */
export function HomeBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <IconTrail
      className={className}
      size={size}
      items={items}
      leading={(i) => (i === 0 ? <Home aria-hidden="true" /> : null)}
    />
  )
}

/* Folder: dosya agaci metaforu. Ara izler kapali klasor, gecerli sayfa dosya. */
export function FolderBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <IconTrail
      className={className}
      size={size}
      items={items}
      leading={(i, last) =>
        last ? (
          <FileText aria-hidden="true" />
        ) : i === 0 ? (
          <FolderOpen aria-hidden="true" />
        ) : (
          <Folder aria-hidden="true" />
        )
      }
    />
  )
}

const stepDot: Record<StyledSize, string> = {
  sm: "size-4 text-[0.625rem]",
  md: "size-4.5 text-[0.625rem]",
  lg: "size-5 text-xs",
  xl: "size-5.5 text-xs",
}

/* Step: every crumb carries a numbered circle; the current page's circle is filled. */
export function StepBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  const dot =
    "inline-flex shrink-0 items-center justify-center rounded-full font-medium tabular-nums"
  return (
    <nav data-slot="styled-breadcrumb" aria-label="Breadcrumb">
      <ol className={cn("flex flex-wrap items-center", trail[size], className)}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          const mark = (
            <span
              aria-hidden="true"
              className={cn(
                dot,
                stepDot[size],
                last
                  ? "bg-primary text-primary-foreground"
                  : "bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] text-muted-foreground"
              )}
            >
              {i + 1}
            </span>
          )
          return (
            <li key={i} className="inline-flex items-center gap-1.5">
              {last || !item.href ? (
                <span className={current} aria-current="page">
                  {mark}
                  {item.label}
                </span>
              ) : (
                <a href={item.href} className={link}>
                  {mark}
                  {item.label}
                </a>
              )}
              {!last && <Sep />}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

const badgeBox: Record<StyledSize, string> = {
  sm: "size-5 rounded-md",
  md: "size-6 rounded-md",
  lg: "size-7 rounded-lg",
  xl: "size-8 rounded-lg",
}

/* Badge: the icon sits in its own toned box rather than next to the label. */
export function BadgeBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  const marks = [Home, LayoutGrid, Component]
  const box =
    "inline-flex shrink-0 items-center justify-center [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-sm [&>i]:leading-none"
  return (
    <nav data-slot="styled-breadcrumb" aria-label="Breadcrumb">
      <ol className={cn("flex flex-wrap items-center", trail[size], className)}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          const Mark = marks[i % marks.length]
          const mark = (
            <span
              aria-hidden="true"
              className={cn(
                box,
                badgeBox[size],
                last
                  ? "bg-[color-mix(in_oklab,var(--color-primary)_16%,transparent)] text-primary"
                  : "bg-secondary text-muted-foreground"
              )}
            >
              <Mark />
            </span>
          )
          return (
            <li key={i} className="inline-flex items-center gap-1.5">
              {last || !item.href ? (
                <span className={cn(current, "gap-2")} aria-current="page">
                  {mark}
                  {item.label}
                </span>
              ) : (
                <a href={item.href} className={cn(link, "gap-2")}>
                  {mark}
                  {item.label}
                </a>
              )}
              {!last && <Sep />}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

/* Mixed: derinlige gore degisen ikon dizisi - kok, bolum, sayfa. */
export function MixedBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  const marks = [Home, LayoutGrid, Component, Folder, FileText]
  return (
    <IconTrail
      className={className}
      size={size}
      items={items}
      leading={(i, last) => {
        const Mark = last ? FileText : marks[Math.min(i, marks.length - 1)]
        return <Mark aria-hidden="true" />
      }}
    />
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Home

Only the root crumb carries a house mark.

Folder

A file tree metaphor: folders on the way, a file at the end.

Step

Each crumb leads with a numbered circle; the current page is filled.

Badge

Each icon sits in its own tinted box next to the label.

Mixed

The mark changes with depth: root, section, then page.

ai2 Icon breadcrumbs: 5 styled variations on the token system

The ai2 Icon breadcrumbs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around breadcrumb trails with a leading icon on each crumb. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: these are static; no motion library work is required. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, there is no motion to reduce.

What is in the ai2 Icon breadcrumbs?

5 exports in one file: Home, Folder, Step, Badge and Mixed. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: these are static; no motion library work is required.
Reduced-motion aware: Under prefers-reduced-motion, there is no motion to reduce.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Icon breadcrumbs sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.