Getting Startedv1.0

Getting Started with Iconest React

Learn how to install and use iconest-react in your React applications. Get up and running in minutes with our comprehensive guide.

TypeScript Support

Full TypeScript definitions included

Tree Shakable

Import only what you need

Customizable

Easy to style and customize

Zero Dependencies

No external dependencies

Installation

Choose your preferred package manager to install iconest-react.

npm

npm install iconest-react

yarn

yarn add iconest-react

pnpm

pnpm add iconest-react

Usage Examples

Here are some common patterns for using iconest-react in your applications.

Basic Usage

Import and use icons in your components

import { Heart, Star, Home } from 'iconest-react'

function MyComponent() {
  return (
    <div>
      <Heart className="text-red-500" />
      <Star className="text-yellow-500" />
      <Home className="text-blue-500" />
    </div>
  )
}

With Custom Props

Customize size, stroke width, and other SVG props

import { Settings, User, Mail } from 'iconest-react'

function Toolbar() {
  return (
    <div className="flex gap-2">
      <Settings size={24} strokeWidth={1.5} />
      <User size={20} strokeWidth={2} />
      <Mail size={16} className="text-gray-600" />
    </div>
  )
}

With Tailwind CSS

Easy styling with utility classes

import { Download, Upload, Trash } from 'iconest-react'

function Actions() {
  return (
    <div className="flex gap-4">
      <Download className="h-6 w-6 text-green-600 hover:text-green-700 cursor-pointer transition-colors" />
      <Upload className="h-6 w-6 text-blue-600 hover:text-blue-700 cursor-pointer transition-colors" />
      <Trash className="h-6 w-6 text-red-600 hover:text-red-700 cursor-pointer transition-colors" />
    </div>
  )
}

Props and Customization

All icons accept standard SVG props for maximum flexibility.

Available Props

Common Props

size - Icon size (number)
className - CSS classes (string)
strokeWidth - Stroke width (number)
color - Icon color (string)

SVG Props

fill - Fill color
stroke - Stroke color
onClick - Click handler
...svgProps - All SVG attributes

Example with All Props

import { Heart } from 'iconest-react'

function LikeButton() {
  return (
    <Heart
      size={32}
      strokeWidth={2}
      className="text-red-500 hover:fill-red-500 transition-all cursor-pointer"
      onClick={() => console.log('Liked!')}
      fill="none"
      stroke="currentColor"
    />
  )
}

Next Steps

Now that you have iconest-react installed, explore more features and examples.

Browse Icons

Explore our library of 1,100+ icons

Browse All

API Reference

Detailed documentation of all props and methods

Read Docs

Examples

Real-world examples and patterns

View Examples