Icon

A small, accessible set of owned stroke icons.

예제

사용해야 할 때

Use Icon for compact actions, navigation, status, and search affordances where a familiar glyph improves recognition.

사용하지 말아야 할 때

Do not use Icon as a logo, illustration, or replacement for a text label when the action is not familiar.

구조

Each icon uses a repository-owned stroke path inside a 24px viewBox.

크기와 변형

Supported sizes are 16, 20, and 24; the default is 24. The supported glyph names are listed in the API below.

상태와 동작

Icon has no independent hover, pressed, or disabled state. A containing Button or link owns interaction state.

반응형 동작

The same geometry is used on mobile and desktop. A containing control owns the touch target.

접근성

Without a non-empty label, Icon renders as decorative with aria-hidden="true". With a label, it renders role="img" and exposes the trimmed label as its accessible name.

React 예제

import { Icon } from '@maxxuxx/react';
import '@maxxuxx/react/styles.css';

export function SearchLabel() {
  return <span><Icon name="search" size={20} /> Search</span>;
}

API

label owns the accessible name. Callers cannot override role, aria-label, aria-labelledby, aria-hidden, tabIndex, focusable, dangerouslySetInnerHTML, style, width, height, viewBox, fill, stroke, strokeLinecap, strokeLinejoin, or the fixed geometry. These values are also discarded at runtime for untyped JavaScript callers. strokeWidth remains the supported presentation adjustment. Keep Icon decorative when visible text already names the action, as in the example above.

사용 토큰

• size/icon/small
• size/icon/medium
• size/icon/large
• color/icon/primary

Figma

The Icon Catalog contains five owned 24px masters and documented instances at 16px, 20px, and 24px. Master and instance dimensions are bound to the matching Icon size tokens, and every vector paint is bound to color/icon/primary.

지원 상태