{"id":15646,"library":"iconsax-react","title":"Iconsax for React","description":"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.","status":"active","version":"0.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/rendinjast/iconsax-react","tags":["javascript","icons","react","icon components","iconsax","typescript"],"install":[{"cmd":"npm install iconsax-react","lang":"bash","label":"npm"},{"cmd":"yarn add iconsax-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add iconsax-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for rendering React components.","package":"react","optional":false}],"imports":[{"note":"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.","wrong":"const EmojiHappy = require('iconsax-react');","symbol":"EmojiHappy","correct":"import { EmojiHappy } from 'iconsax-react';"},{"note":"Import TypeScript types for props like `Variant` to ensure type safety in your components.","symbol":"Variant (type)","correct":"import type { Variant } from 'iconsax-react';"},{"note":"All icons are top-level named exports from the main package entry point. Avoid importing from internal paths like `dist`.","wrong":"import { EmojiHappy, Setting2, Notification } from 'iconsax-react/dist';","symbol":"Multiple Icons","correct":"import { EmojiHappy, Setting2, Notification } from 'iconsax-react';"}],"quickstart":{"code":"import React from 'react';\nimport { EmojiHappy, Setting2, Notification } from 'iconsax-react';\n\nconst App = () => {\n  return (\n    <div style={{ display: 'flex', gap: '20px', alignItems: 'center', padding: '20px' }}>\n      <EmojiHappy size={48} color=\"#4CAF50\" variant=\"Bulk\" />\n      <Setting2 size={32} color=\"#FF9800\" variant=\"TwoTone\" />\n      <Notification size={24} color=\"#F44336\" variant=\"Outline\" />\n      <p>Click me!</p>\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"Demonstrates importing and using multiple Iconsax components with custom sizes, colors, and variant styles within a React functional component."},"warnings":[{"fix":"Review the GitHub repository's commit history or issue tracker before updating. Pin exact versions in `package.json` for stability.","message":"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).","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Always specify the `variant` prop (e.g., `<EmojiHappy variant=\"Bulk\" />`) if you intend to use a style other than the default 'Linear'.","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"},{"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\"`).","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Run `npm install iconsax-react` or `yarn add iconsax-react` to install the package. Double-check the import statement for correct spelling.","cause":"The `iconsax-react` package has not been installed or there is a typo in the import path.","error":"Module not found: Can't resolve 'iconsax-react'"},{"fix":"Ensure the icon is imported with curly braces, e.g., `import { EmojiHappy } from 'iconsax-react';`. Avoid `import EmojiHappy from 'iconsax-react';`.","cause":"Attempting to use an icon component without correctly importing it as a named export.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."}],"ecosystem":"npm"}