@tailgrids/icons

Beautiful React icon components for Tailgrids - A comprehensive collection of 180+ high-quality SVG icons built with TypeScript and React.

Installation

Install the package using your preferred package manager:

npm

npm i @tailgrids/icons

yarn

yarn add @tailgrids/icons

pnpm

pnpm add @tailgrids/icons

Usage

Import the icons you need and use them as React components:

Basic Usage

import { ArrowLeftSquare, FourK } from '@tailgrids/icons';

function App() {
  return (
    <div>
      <ArrowLeftSquare />
      <FourK />
    </div>
  );
}

With Custom Props

import { ArrowLeftSquare, FourK } from '@tailgrids/icons';

function App() {
  return (
    <div>
      {/* Custom size */}
      <ArrowLeftSquare size={35} />

      {/* With className for styling */}
      <FourK
        size={24}
        className="hover:scale-110 transition-transform cursor-pointer"
      />
    </div>
  );
}

Props

All icon components accept the following props:

| Prop | Type | Default | Description | | ----------- | ------------------ | ----------- | -------------------------------------- | | size | number \| string | 24 | Icon size (width and height in pixels) | | className | string | undefined | Additional CSS classes for styling | | ...props | SVGProps | - | All standard SVG element props |

All icons also inherit standard SVG props through React.SVGProps<SVGSVGElement>, giving you full control over SVG attributes.

Available Icons

The package includes 170+ icons. Here are some examples:

• ArrowLeftSquare - Square arrow pointing left
• FourK - 4K display icon
• Heart - Heart shape
• StarFat - Filled star
• Check - Check mark
• Xmark2x - Close/X mark
• SearchPlus - Magnifying glass with plus
• UserMultiple4 - Multiple users
• Bell1 - Notification bell
• Camera1 - Camera icon

And many more! Check the source code or package exports for the complete list.

TypeScript Support

This package is built with TypeScript and includes full type definitions out of the box.

Peer Dependencies

• React >= 18.0.0
• React DOM >= 18.0.0

Browser Support

Works in all modern browsers that support ES6+ and SVG.

Author

Tailgrids

Links

• 📖 Documentation
• 💬 Support