Skip to content
Components

Icon

Renders the given icon as a decorative SVG - always aria-hidden and non-focusable, with a fixed 1.5 stroke width.

Usage

import { Icon, ICON_SIZE_CLASS, IconProps, IconSize } from "@instruments/materia-ui/components/icon";

Best practices

  • Route every lucide/SVG glyph through Icon (<Icon icon={ArrowRight} />), never the raw component - it fixes the 1.5 stroke and size scale so icons stay consistent.

  • Icon is always aria-hidden + non-focusable - pair it with visible text or give the interactive parent an aria-label; never rely on it to name a control.

  • Size with the size token ("sm","lg"…), not className="size-6" - the scale maps to the shared ComponentSize steps other components align to.

Props

PropTypeDefaultDescription
icon(required)IconComponent

Icon component from lucide-react or any SVG React component.

sizeIconSize

Size scale for icons. Supports ComponentSize plus "3xs" for tiny icons. Defaults to base (20px).

Also exports

  • constICON_SIZE_CLASS
  • interfaceIconProps
  • typeIconSize

Composition

Used by

Accordion, Anchor, AttributeCard, Badge, Breadcrumb, Button, Calendar, Checkbox, ColorPalette, Combobox, Command, ContextMenu, CountrySelect, DataGrid, DataGridColumnFilter, DataGridColumnHeader, DeliveryBanner, DocumentList, DropdownMenu, Empty, FileUploadDropzone, IconBox, IconCard, IconMorph, InputCard, InputGroup, InputOTP, LocationInput, MenuItem, Menubar, MobileNavigationRoot, NativeSelect, NavigationMenu, ProductCard, PromptPanel, RequirementItem, ResizablePanelGroup, SegmentedControl, Select, Sidebar, SocialIcon, Stepper, Swatch, TabNavigation, Tabs, Tag, TagSelector, ThinkingLoader, ThinkingTrace, Toaster, Toggle, LiveWaveform