Icon Library

@mosmox-ui/icons is a separate React package of SVG icons for Mosmox UI projects. Each icon is rendered as an inline SVG, so its color, size, line weight, and direction can be controlled directly from React props.

InstallationCopy Anchor Link

Install the package from npm:

npm install @mosmox-ui/icons

Alternative package managers:

pnpm add @mosmox-ui/icons
yarn add @mosmox-ui/icons

The package requires React 18 or newer as a peer dependency. It is published separately from the main UI component package and can be installed only where icons are needed.

Basic usageCopy Anchor Link

Named icons are available as React components. The component name is PascalCase:

import { Airplane, Heart, MagnifyingGlass } from '@mosmox-ui/icons';

export function Toolbar() {
  return (
    <div>
      <Airplane size={32} color="#d90b2c" weight="light" />
      <Heart size="1.25rem" color="currentColor" weight="regular" />
      <MagnifyingGlass aria-label="Search" size={20} weight="bold" />
    </div>
  );
}

Icons inherit the surrounding text color by default because their default color is currentColor:

<button style={{ color: '#172523' }} aria-label="Open settings">
  <Gear size={20} />
</button>

Dynamic icon namesCopy Anchor Link

Use the generic Icon component when the icon name comes from configuration, user input, or a data set:

import { Icon } from '@mosmox-ui/icons';

export function StatusIcon({ name }: { name: string }) {
  return <Icon name={name} size={24} color="#d90b2c" weight="regular" />;
}

The name value should match one of the exported icon names. The icon browser provides the complete searchable catalog and can be used to find the exact name.

Appearance optionsCopy Anchor Link

Every icon supports the following options:

All other standard SVG attributes, such as className, style, role, and event handlers, can be passed to the icon.

Size and colorCopy Anchor Link

Use a number for pixel sizing, a CSS length for a fixed size, or 1em to follow the current font size:

<Bell size={24} color="tomato" />
<Bell size="1.5rem" color="var(--color-accent)" />
<Bell size="1em" />

Line weightCopy Anchor Link

The weight prop selects one of six SVG variants. Use thin or light for quiet secondary actions, regular for normal UI, bold for emphasis, fill for solid silhouettes, and duotone for two-tone illustrations:

<Star weight="thin" />
<Star weight="regular" />
<Star weight="bold" />
<Star weight="fill" />
<Star weight="duotone" />

AccessibilityCopy Anchor Link

Decorative icons should be hidden from assistive technology when nearby text already describes the action. The package does this automatically when no aria-label is supplied. Add an accessible name when the icon is the only content of a control:

<button type="button" aria-label="Close dialog">
  <X size={20} />
</button>

Do not rely on color alone to communicate a status. Pair status icons with visible text or an appropriate accessible label.

Icon browserCopy Anchor Link

Use the interactive icon browser to search the full catalog, filter by category, preview an icon, and adjust its color, size, and line weight. The browser is a separate playground page; this documentation page is the API and usage reference.

Package linksCopy Anchor Link

The package links below are temporary project links and can be updated when the package repository is published:

• Open the package on npmjs.com
• Open the package repository on GitHub
• View the @mosmox-ui/icons package source in this workspace

License and creditsCopy Anchor Link

The SVG source assets in this package are based on the Phosphor Icons v2.1.0 asset release. Phosphor Icons are created and maintained by the Phosphor Icons project and distributed under the MIT License. The original license text is included in the package at icons/LICENSE and must remain with redistributed copies.

The @mosmox-ui/icons React wrapper is a separate Mosmox implementation. It does not reuse Phosphor's React components; it wraps the source SVG data as configurable React components.

• Phosphor Icons v2.1.0 release
• Phosphor MIT License
• Source SVG assets in the package