@boring-icons/react

Beautiful, customizable React icon components with TypeScript support.

Installation

npm install @boring-icons/react
# or
pnpm add @boring-icons/react
# or
yarn add @boring-icons/react

Usage

Basic Usage

import { IconCheck, IconAlert } from '@boring-icons/react';

function App() {
  return (
    <div>
      <IconCheck />
      <IconAlert />
    </div>
  );
}

Custom Size and Color

import { IconCheck } from '@boring-icons/react';

function App() {
  return (
    <>
      {/* Using color prop */}
      <IconCheck color="red" size={32} />

      {/* Using currentColor (inherits text color) */}
      <IconCheck className="text-blue-500" size={24} />
    </>
  );
}

With Ref

All icons support forwardRef for accessing the underlying SVG element:

import { useRef } from 'react';
import { IconCheck } from '@boring-icons/react';

function App() {
  const iconRef = useRef<SVGSVGElement>(null);

  const handleClick = () => {
    if (iconRef.current) {
      console.log('Icon dimensions:', iconRef.current.getBoundingClientRect());
    }
  };

  return <IconCheck ref={iconRef} onClick={handleClick} />;
}

All SVG Props Supported

Icons accept all standard SVG element props:

<IconCheck
  color="blue"
  size={32}
  className="my-icon"
  style={{ margin: '10px' }}
  onClick={() => console.log('Clicked!')}
  aria-label="Success indicator"
/>

TypeScript Support

Using IconProps Type

import { IconCheck, type IconProps } from '@boring-icons/react';
import type { ComponentProps } from 'react';

// Using exported IconProps
const iconProps: IconProps = {
  color: 'blue',
  size: 32,
  className: 'my-icon'
};

// Extracting props from component
type CheckIconProps = ComponentProps<typeof IconCheck>;

// Creating custom wrapper
function CustomIcon(props: IconProps) {
  return <IconCheck {...props} />;
}

Props

All icon components accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | string | 'currentColor' | Icon stroke color | | size | string \| number | 24 | Icon width and height in pixels | | ...props | SVGProps<SVGSVGElement> | - | All standard SVG attributes |

Available Icons

All icons are prefixed with Icon to avoid naming collisions:

import {
  IconCheck,
  IconAlert,
  IconAlertCircle,
  // ... and more
} from '@boring-icons/react';

Features

• ✅ TypeScript Native - Built with TypeScript, includes full type definitions
• ✅ Tree-shakeable - Only import the icons you need
• ✅ Customizable - Easily change size, color, and all SVG properties
• ✅ Ref Support - ForwardRef support for all components
• ✅ Accessible - Includes aria-hidden by default, can be overridden
• ✅ Zero Dependencies - Only requires React as peer dependency

Bundle Size

Each icon is ~1-2KB. Tree-shaking ensures you only bundle the icons you import.

Browser Support

Supports all modern browsers that support React 16.8+:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Icons are generated from the @boring-icons/svg package. To add or modify icons:

1. Update SVG files in the @boring-icons/svg package
2. Rebuild the React package: pnpm run build

License

MIT