Component reference

Icon

One icon from the library's set, by name.

Preview

Full set

Find and choose a semantic icon. Names are the stable call keys used by components and JSON; application-only icons use IconSource with the pinned Lucide pass-through.

packages/meowtail/stories/icons.stories.tsxline 37tsx

render: () => (
  <Stack gap="normal">
    <Field htmlFor="icon-search" label="Find an icon" className="workshop-constrained">
      <SearchInput
        id="icon-search"
        label="Find an icon"
        placeholder="For example: search, file, arrow…"
      />
    </Field>
    <Note role="status" data-icon-feedback>
      {iconNames.length} icons · select one to see its name
    </Note>
    <div className="workshop-icon-grid" aria-label="Functional icons">
      {iconNames.map((name) => (
        <Button
          variant="quiet"
          className="workshop-icon-item"
          data-icon={name}
          aria-pressed="false"
        >
          <Icon name={name} size={20} />
          <span>{name}</span>
        </Button>
      ))}
    </div>
    <Note data-icon-empty hidden>
      No matching icons; try a shorter name.
    </Note>
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Icon } from "meowtail";

<Icon name="search" />

Examples

The other stories that show this component.

Scale and its relationship to text

Compare the default, 16, 20, and 24px outlines with adjacent text, and check named graphics and icon buttons. Size and hit area are judged separately.

packages/meowtail/stories/icons.stories.tsxline 111tsx

render: () => (
  <Specimens>
    <Specimen
      label="Same outline, different reading distance"
      aria-label="Size reference"
      align="start"
    >
      {[undefined, 16, 20, 24].map((size) => (
        <div className="workshop-row workshop-icon-scale">
          <span className="workshop-note">{size === undefined ? "Default" : `${size}px`}</span>
          <span>
            <Icon name="search" size={size} /> Find components
          </span>
          <span>
            <Icon name="file" size={size} /> Design notes
          </span>
          <span>
            <Icon name="folder" size={size} /> Current project
          </span>
        </div>
      ))}
    </Specimen>
    <Specimen
      label="The theme decides stroke and feel"
      aria-label="Theme stroke reference"
      align="start"
    >
      <div className="workshop-row">
        <span className="workshop-note">MeowUI standard theme</span>
        <span className="workshop-icon-state-sample">
          <IconButton label="studio search" data-icon-action="studio">
            <Icon name="search" />
          </IconButton>
          <span className="workshop-note">Available</span>
        </span>
        <span className="workshop-icon-state-sample">
          <IconButton label="studio search unavailable" disabled>
            <Icon name="search" />
          </IconButton>
          <span className="workshop-note">Unavailable</span>
        </span>
      </div>
    </Specimen>
    <Specimen
      label="Standalone graphic names"
      aria-label="Standalone graphic names"
      align="start"
    >
      <Inline gap="compact" align="center">
        <Icon name="folder" size={24} label="Project folder" />
        <span className="workshop-note">
          Standalone graphics can be named; decorative icons inside a button take their action
          from the button.
        </span>
      </Inline>
    </Specimen>
    <Note role="status" data-feedback>
      Use Tab and Enter to operate the icon buttons.
    </Note>
  </Specimens>
)

API reference

Props

Prop	Type	Default
`name`Required	`IconName`	–
`size`	`number`	`18`
`label`Omit for decorative icons. Icon-only controls should label the control itself.	`string`	–

DOM parts

This component has no registry contract.

Registry

This component has no registry contract. It is a story that shows several components together.