Documentation

Getting Started

Monoic is a collection of monochrome SVG icons for React. Consistent, TypeScript-ready, and tree-shakeable.

Free to useTypeScript readyTree-shakeableReact 18 & 19

Installation & Update

Install Monoic or update to the latest version.

npm install @monoic/icons

Import

Import any icon by its name — only what you use is bundled.

tsx

import { ReactJS, TypeScript, Vite } from "@monoic/icons";

Each icon is a named export. The import is tree-shaken — only the icons you import will be included in your bundle.

Usage

Drop an icon into your JSX like any React component.

tsx

import { ReactJS } from "@monoic/icons";

export function MyComponent() {
  return (
    <ReactJS
      size={24}
      className="text-foreground"
    />
  );
}

Variants

Icons can ship with multiple styles — pass the variant prop to switch between them.

tsx

import { Claude } from "@monoic/icons";

// Outline (default)
<Claude size={24} />

// Filled
<Claude size={24} variant="filled" />

Only icons that declare a filled variant accept variant="filled". If an icon has no filled paths it will silently fall back to outline.

TypeScript

Full types included — no @types package needed.

tsx

import type { IconProps } from "@monoic/icons";
import { ReactJS } from "@monoic/icons";

function IconWrapper(props: IconProps) {
  return <ReactJS {...props} />;
}

Every icon accepts IconProps, which extends SVGProps<SVGSVGElement>.

Props Reference

All props accepted by every Monoic icon component.

Prop	Type	Default	Description
size	number \| string	24	Width & height of the icon in pixels.
className	string	""	CSS classes applied to the <svg> element.
color	string	"currentColor"	Fill / stroke color. Inherits CSS color by default.
variant	"outline" \| "filled"	"outline"	Style variant. Falls back to outline if the icon has no filled paths.
style	CSSProperties	—	Inline styles forwarded to the <svg> element.
...rest	SVGProps<SVGSVGElement>	—	Any additional SVG attribute is forwarded.

Monoic v1.0.17 · Free to useView on npm