Remix Icon
Open-source neutral-style icons for designers and developers
STATS
OVERVIEW
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.
Remix Icon can be used as an icon font, SVG sprites, or individual SVG files. For React projects there is a community package available. The library does not have official TypeScript support or tree-shaking out of the box, which is its main technical limitation compared to modern alternatives.
// VERDICTRemix Icon is a solid choice when you need a large, diverse icon set with both line and fill variants and don't need TypeScript or advanced tree-shaking. It is particularly popular in Vue and non-framework projects where its CSS font approach works well.
OFFICIAL LICENSE & COMMERCIAL USE
The Apache 2.0 License is a permissive license that allows free commercial use, modification, and distribution of the Remix Icon icons. It also grants you an express, perpetual, worldwide, non-exclusive patent license. You can package and distribute the icons in commercial products. Note that you must provide a copy of the license and clear attribution if you redistribute the original files.
- Commercial Use Allowed
- Modification Allowed
- Redistribution Allowed
- Sublicensing Allowed
- Must keep copyright notice in source files
- License remains active on copy/use
INSTALLATION
npm install remixicon
npm install remixicon // Note: Import the CSS in your layout file. Icons are used as className strings rather than React components.
npm install remixicon
npm install remixicon
npm install remixicon
CODE EXAMPLES
// First import the CSS in your layout or _app file
import 'remixicon/fonts/remixicon.css'
export default function App() {
return (
<div>
<i className="ri-home-line" />
<i className="ri-settings-line" />
<i className="ri-user-line" />
</div>
)
}import 'remixicon/fonts/remixicon.css'
export default function App() {
return (
<div>
{/* Line variant */}
<i className="ri-heart-line text-gray-500" />
{/* Fill variant */}
<i className="ri-heart-fill text-red-500" />
</div>
)
}import 'remixicon/fonts/remixicon.css'
export default function App() {
return (
<i
className="ri-star-fill"
style={{ fontSize: '24px', color: '#f59e0b' }}
/>
)
}