Registry / iconsax-react

iconsax-react

library0.0.8jsnpmunverified

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.

npm install iconsax-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ICONSAX-REACT

iconsax-react

javascriptv0.0.8

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

EmojiHappy

✓ import { EmojiHappy } from 'iconsax-react';

✗ const EmojiHappy = require('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

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

✗ import { EmojiHappy, Setting2, Notification } from 'iconsax-react/dist';

All icons are top-level named exports from the main package entry point. Avoid importing from internal paths like `dist`.

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;

Debug

Known issues

breakingThe 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.

affects: >=0.0.1

gotchaIconsax 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'.

affects: >=0.0.1

gotchaIcon 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"`).

affects: >=0.0.1

Errors

Common errors & fixes

Module not found: Can't resolve 'iconsax-react'

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.

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';`.

Upgrade

Version history

0.0.8latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for rendering React components.

Agent activity

5 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/rendinjast/iconsax-react ↗

packagehttps://www.npmjs.com/package/iconsax-react ↗

homepagehttps://iconsax-react.pages.dev/ ↗