Z Icons

Framework-agnostic SVG icon package with optional React wrappers and a browser-only Web Component registration entry.

Browse all available icons at icons.zcorvus.com.

React

Use prefixed icon components when you want the smallest React imports and clear editor autocomplete:

import { MinaSearch, MinaSearchSolid } from '@zcorvus/z-icons/react/icons';

export function SearchActions() {
  return (
    <>
      <MinaSearch />
      <MinaSearchSolid />
    </>
  );
}

The component name format is {Pack}{IconName} or {Pack}{IconName}{Variant}:

• MinaSearch
• MinaSearchSolid
• NeoSun
• CoreSun

Use the general component when the pack is dynamic:

import { ZIcon } from '@zcorvus/z-icons/react';

export function SearchIcon() {
  return <ZIcon type="mina" name="search" />;
}

Use pack-specific components when you know the pack and variant. These keep the same name ergonomics while avoiding imports for unrelated packs:

import { ZMina } from '@zcorvus/z-icons/react/mina';
import { ZMinaSolid } from '@zcorvus/z-icons/react/mina-solid';

export function SearchActions() {
  return (
    <>
      <ZMina name="search" />
      <ZMinaSolid name="search" />
    </>
  );
}

Available optimized React entries:

• @zcorvus/z-icons/react/icons -> prefixed icon components such as MinaSearch
• @zcorvus/z-icons/react/core -> ZCore
• @zcorvus/z-icons/react/neo -> ZNeo
• @zcorvus/z-icons/react/mina -> ZMina
• @zcorvus/z-icons/react/mina-solid -> ZMinaSolid

Web Component

Import the registration entry only in browser code:

import '@zcorvus/z-icons/register';

Then use the element:

<z-icon type="mina" name="search" variant="solid" size="24"></z-icon>

The root package import is SSR-safe and does not register the Web Component by itself.