Iconsax for React

0.0.8 · active · verified Tue Apr 21

iconsax-react is a React component library wrapping the Iconsax icon pack, offering 1000 distinct icons across six styles (Linear, Outline, TwoTone, Bulk, Broken, Bold), totaling 6000 variations. Currently at version 0.0.8, it's in early development, implying frequent updates and potential for rapid change. The library provides a vast collection of visually consistent, 24px grid-based icons, usable as standard React components with configurable `color`, `size`, and `variant` props. It aims to offer a comprehensive, style-flexible iconographic system for modern React applications.

Common errors

```
Module not found: Can't resolve 'iconsax-react'
```
cause The `iconsax-react` package has not been installed or there is a typo in the import path.

fix Run `npm install iconsax-react` or `yarn add iconsax-react` to install the package. Double-check the import statement for correct spelling.
```
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
```
cause Attempting to use an icon component without correctly importing it as a named export.

fix Ensure the icon is imported with curly braces, e.g., `import { EmojiHappy } from 'iconsax-react';`. Avoid `import EmojiHappy from 'iconsax-react';`.

Warnings

breaking The package is currently in a very early development phase (version 0.0.x). While not explicitly documented, minor or patch releases may introduce breaking changes without a major version increment (pre-1.0.0 semantic versioning behavior).
Fix: Review the GitHub repository's commit history or issue tracker before updating. Pin exact versions in `package.json` for stability.
gotcha Iconsax provides 6 different variants (Linear, Outline, TwoTone, Bulk, Broken, Bold). By default, icons render in the 'Linear' variant. For other styles, you must explicitly set the `variant` prop.
Fix: Always specify the `variant` prop (e.g., `<EmojiHappy variant="Bulk" />`) if you intend to use a style other than the default 'Linear'.
gotcha Icon size can be specified as a number (e.g., `size={24}`) or a string (e.g., `size="2em"`). Incorrect units or unexpected string values might lead to rendering issues.
Fix: Use simple pixel values as numbers (`size={24}`) for consistent rendering, or ensure valid CSS length units when using strings (`size="24px"`, `size="1.5em"`).

Install

npm install iconsax-react npm
yarn add iconsax-react yarn
pnpm add iconsax-react pnpm

Imports

EmojiHappy
wrong:
```
const EmojiHappy = require('iconsax-react');
```
correct:
```
import { EmojiHappy } from 'iconsax-react';
```
Each icon is a named export. Ensure you import the specific icon you need using named imports. CommonJS `require` is not officially supported or recommended.
Variant (type)
```
import type { Variant } from 'iconsax-react';
```
Import TypeScript types for props like `Variant` to ensure type safety in your components.
Multiple Icons
wrong:
```
import { EmojiHappy, Setting2, Notification } from 'iconsax-react/dist';
```
correct:
```
import { EmojiHappy, Setting2, Notification } from 'iconsax-react';
```
All icons are top-level named exports from the main package entry point. Avoid importing from internal paths like `dist`.

Quickstart

Demonstrates importing and using multiple Iconsax components with custom sizes, colors, and variant styles within a React functional component.

import React from 'react';
import { EmojiHappy, Setting2, Notification } from 'iconsax-react';

const App = () => {
  return (
    <div style={{ display: 'flex', gap: '20px', alignItems: 'center', padding: '20px' }}>
      <EmojiHappy size={48} color="#4CAF50" variant="Bulk" />
      <Setting2 size={32} color="#FF9800" variant="TwoTone" />
      <Notification size={24} color="#F44336" variant="Outline" />
      <p>Click me!</p>
    </div>
  );
};

export default App;

view raw JSON →