Remix Icon
Remix Icon is a comprehensive open-source icon library with over 3,200 icons available in both line and fill styles. It was designed with a neutral, system-level aesthetic that works well across a wide range of application types. The library covers an impressive range of categories including editor tools, media controls, maps, finance, health, and more. Icons are organized into clear categories making it easy to browse and find what you need. The neutral style means icons don't feel tied to any particular design trend. The collection is licensed under Apache 2.0; review the icon license guide for commercial-use details.
Remix Icon Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 6,473 vector SVG icons |
| License | Apache 2.0 (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | remixicon |
| Source Repository | Official GitHub Repository → |
How many icons does Remix Icon have?
Remix Icon currently includes 6,473 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Remix Icon free for commercial use?
Yes, Remix Icon is distributed under the Apache 2.0 license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Remix Icon in React, Next.js, and Vue?
Install the package using npm install remixicon, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install remixicon
// React & Next.js App Router usage
import { ArrowDownBoxFill } from 'remixicon'
export default function Header() {
return <ArrowDownBoxFill className="w-5 h-5 text-indigo-500" />
}Remix Icon FAQ & Technical Guide
Is Remix Icon free for commercial use?
Yes. Remix Icon uses the Apache 2.0 license which allows free commercial use. Unlike MIT, Apache 2.0 also provides explicit patent rights.
How do I use Remix Icon in React?
Import the CSS file in your root layout or App component, then use icon class names as className on i elements. For example: <i className='ri-home-line' />.
Does Remix Icon support tree-shaking?
No. The standard installation loads all icons as a font. For better performance, you can download individual SVG files from the website and import them manually.
How is Remix Icon different from Lucide Icons?
Remix Icon has more icons (3,200 vs 1,400) and offers fill variants. However Lucide provides typed React components with tree-shaking while Remix Icon uses a CSS font approach with no TypeScript support.
Can I use Remix Icon with Tailwind CSS?
Yes. Since icons are HTML elements with className, you can apply Tailwind text color utilities directly. Use text-{color} for color and text-{size} or a fixed font-size style for sizing.