Schematic Icons

A React component library for displaying Schematic icons. Built with TypeScript and modern CSS, providing type-safe icon usage.


Features

- 🎨 100+ carefully crafted icons
- 🔒 TypeScript support with type-safe icon names
- ⚡️ Zero configuration required
- 🎯 Tree-shakeable
- 🎭 Customizable through CSS classes and styles
- 📦 Lightweight with minimal dependencies

Installation

``bash
yarn add @schematichq/schematic-icons
`

Quick Start

`tsx
import { Icon } from '@schematichq/schematic-icons';

function MyComponent() {
return (



);
}
`

Usage

$3

The Icon component is the main way to use Schematic icons in your React application:

`tsx
import { Icon } from '@schematichq/schematic-icons';

function MyComponent() {
return (



);
}
`

$3

The Icon component accepts the following props:

`typescript
interface IconProps {
/* The name of the icon to display /
name: IconNames;
/* Additional CSS classes to apply to the icon /
className?: string;
/* Additional CSS styles to apply to the icon /
style?: React.CSSProperties;
}
`

$3

The package provides full TypeScript support with type-safe icon names:

`typescript
import { IconNames } from '@schematichq/schematic-icons';

// Type-safe icon names
const iconName: IconNames = 'check'; // Will error if 'check' is not a valid icon
`

$3

The package includes 100+ icons across various categories:

#### Navigation
- arrow-up, arrow-down, arrow-left, arrow-right
- chevron-up, chevron-down, chevron-left, chevron-right
- backspace, menu, sidebar

#### Actions
- check, close, search, filter
- copy, link, move, pencil
- folder, folder-plus, folder-minus

#### UI Elements
- dots-horizontal, dots-vertical
- plus-minus, plus-rounded-outline
- collapse, collapse-empty

#### Payment & Finance
- stripe, paypal, visa, mastercard
- amex, applepay, amazonpay
- wallet, credit, bank

#### Technology
- github, google, clerk
- webhook, integration, api
- code, server-search, database

For a complete list of available icons, you can use the iconsList export:

`typescript
import { iconsList } from '@schematichq/schematic-icons';

console.log(iconsList); // Array of all available icon names
`

API Reference

$3

The package exports the following:

`typescript
// React Component
export { Icon } from '@schematichq/schematic-icons';

// Types
export type { IconProps } from '@schematichq/schematic-icons';
export type { IconNames } from '@schematichq/schematic-icons';

// Utilities
export { iconsList } from '@schematichq/schematic-icons';
`

$3

- IconNames: A union type of all available icon names
- IconProps: The props interface for the Icon component
- iconsList: An array of all available icon names

Development

1. Clone the repository:
`bash
git clone https://github.com/SchematicHQ/schematic-icons.git
cd schematic-icons
`

2. Install dependencies:
`bash
yarn install
`

$3

The following yarn commands are available:

`bash


Build the project (generates icons and compiles TypeScript)

yarn build

Clean build artifacts and generated files

yarn clean

Generate icon fonts and type definitions

yarn generate

Run a complete build (clean, generate, and build)

yarn build:all

Run ESLint on TypeScript files

yarn lint

Prepare the package for publishing (runs build)

yarn prepare
``

Contributing

Please see our Contributing Guide for details.

License & Attribution

MIT © Schematic

This package includes icons from The Noun Project under a paid license. Icons may only be used as part of this package.

Missing attribution? Submit a request.