Icon

A wrapper that gives an icon glyph the library's size and colour axes. Neba ships no icon set, so the glyph comes from whichever set you chose.

import { Icon } from 'neba';

<Icon icon={<BoltIcon />} size="lg" color="warning" label="Fast" />;

Props

Prop	Type	Default	Description
icon *	ReactNode	—	The glyph: an svg, an img, a component from an icon set, a character. A prop and not children because the two things you always want to change about an icon somebody else drew are the two you cannot reach once it is a child
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The box the glyph is drawn in: 14 / 16 / 20 / 24 / 28px. Its own ladder rather than the control heights. An icon is not a control, and a 32px md glyph would be the size of the button it sits in
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'inherit'	'inherit'	Semantic colour role, or `inherit` to take the colour of whatever it sits in. The one `color` in the library that does not default to `primary`: an icon is content, and it nearly always sits inside something that has already decided
label	string	—	What the icon says. Without it the icon is hidden from the accessibility tree entirely: most icons sit next to a word that already says the same thing, and reading both out loud is worse than reading one
transitionshared	NebaTransition	—	An entrance animation, run once on mount (transition="fade"). Wrap it in an Animate* component for a trigger or a replay

The glyph is passed as the icon prop rather than as children, which is what lets Icon set the size and colour of an element it did not draw: <Icon icon={<BoltIcon />} />.

Every native <span> attribute passes through.

Examples

size

Its own steps rather than the control heights: 14 · 16 · 20 · 24 · 28px. These are the sizes icon sets are actually drawn at, so a glyph lands on the pixel grid and is never resampled.

import { Icon, Typography } from 'neba';

function BellIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <path
        d="M4 6.5a4 4 0 0 1 8 0c0 3 1 4 1 4H3s1-1 1-4Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
      <path d="M6.5 13a1.5 1.5 0 0 0 3 0" stroke="currentColor" strokeWidth="1.5" />
    </svg>
  );
}

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function IconSizes() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      {SIZES.map((size) => (
        <div key={size} className="flex flex-col items-center gap-2">
          <Icon icon={<BellIcon />} size={size} label={`Notifications, ${size}`} />
          <Typography level="caption">{size}</Typography>
        </div>
      ))}
    </div>
  );
}

color

color defaults to inherit: the one colour prop in the library that does not default to primary. Placed somewhere that has already decided its content colour, like a button label or inside an Alert, the icon takes that colour. Name a role colour explicitly to override it.

import { Button, Icon, Typography } from 'neba';

function CheckIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <path
        d="m3.5 8.5 3 3 6-6"
        stroke="currentColor"
        strokeWidth="1.75"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

/**
 * `color` defaults to `inherit`, which is why the icon inside the button comes
 * out white without being told to. Naming a family opts out of that.
 */
export default function IconColors() {
  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-wrap items-center gap-4">
        {COLORS.map((color) => (
          <Icon key={color} icon={<CheckIcon />} color={color} size="lg" label={color} />
        ))}
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button startIcon={<Icon icon={<CheckIcon />} size="sm" />}>Approve</Button>
        <Button
          variant="outline"
          color="danger"
          startIcon={<Icon icon={<CheckIcon />} size="sm" />}
        >
          Reject
        </Button>
        <Typography level="caption">Both icons inherit; neither was given a colour.</Typography>
      </div>
    </div>
  );
}

label

Without label the icon is aria-hidden and leaves the accessibility tree. That is the default because most icons sit beside text that already says the same thing. Pass label only when the glyph carries the meaning on its own.

// The text next to it already says "Delete".
<Button startIcon={<Icon icon={<TrashIcon />} />}>Delete</Button>

// There is nothing but the glyph, so it needs a name.
<Icon icon={<TrashIcon />} label="Delete" />

For a glyph that is the whole control, use IconButton instead: there label is required.