Icon

Renders a lucide-react icon at one of three HUD sizes with a consistent stroke width. Use it for status glyphs and icons next to text.

import { Icon } from 'jarvis-react-ui';

Sizes

Pass the icon component itself (not an element) to icon. sm is 12px, md (the default) 14px and lg 16px; every size uses a 1.75 stroke.

import { Cpu } from 'lucide-react';
import { Icon } from 'jarvis-react-ui';

export default function Sizes() {
    return (
        <div className="flex items-center gap-6 text-accent">
            <Icon icon={Cpu} size="sm" aria-label="CPU" />
            <Icon icon={Cpu} size="md" aria-label="CPU" />
            <Icon icon={Cpu} size="lg" aria-label="CPU" />
        </div>
    );
}

Color

The icon draws in currentColor. Set a text color class on the icon via className, or on a parent element.

Decorative icons

Icons are decorative by default: without an aria-label the <svg> gets aria-hidden="true", so screen readers skip it. Use this when the text next to the icon already says everything.

import { Battery, Thermometer, Wifi } from 'lucide-react';
import { Icon, Mono } from 'jarvis-react-ui';

export default function Decorative() {
    return (
        <div className="flex flex-col gap-2">
            <span className="flex items-center gap-2">
                <Icon icon={Wifi} size="sm" className="text-accent" />
                <Mono>Uplink · secure</Mono>
            </span>
            <span className="flex items-center gap-2">
                <Icon icon={Thermometer} size="sm" className="text-warning" />
                <Mono>Core temp · 87 °C</Mono>
            </span>
            <span className="flex items-center gap-2">
                <Icon icon={Battery} size="sm" className="text-success" />
                <Mono>Reserve · 94%</Mono>
            </span>
        </div>
    );
}

Meaningful icons

An icon that stands on its own and carries information needs an aria-label; the <svg> then gets role="img" and that label as its accessible name. For a clickable icon use IconButton instead.

import { ShieldAlert, ShieldCheck } from 'lucide-react';
import { Icon } from 'jarvis-react-ui';

export default function Standalone() {
    return (
        <div className="flex items-center gap-4">
            <Icon icon={ShieldCheck} size="lg" className="text-success" aria-label="Shields up" />
            <Icon icon={ShieldAlert} size="lg" className="text-error" aria-label="Shields down" />
        </div>
    );
}

Accessibility

Renders the lucide <svg>. Without aria-label it is aria-hidden="true" (decorative); with aria-label it gets role="img" and that name.
An explicit aria-hidden always wins over the default.
The ref points at the <svg> element.

API

Prop	Type	Default	Description
`icon` (required)	`LucideIcon`		The `lucide-react` icon component to render, e.g. `Cpu`.
`aria-hidden`	`boolean \| 'true' \| 'false'`		Hides the icon from assistive technology. When omitted it is `true` unless `aria-label` is set, so icons are decorative by default.
`aria-label`	`string`		Accessible name for an icon that carries meaning on its own; also sets `role="img"` on the `<svg>`.
`className`	`string`		Additional class names for the `<svg>` element; color it with a text color class.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Icon size: `sm` 12px, `md` 14px, `lg` 16px, with a 1.75 stroke.

Also accepts inherited props from RefAttributes (1), Attributes (1).