Remix Icon
Open-source neutral-style icons for designers and developers
STATS
OVERVIEW
Remix Icon is a comprehensive open-source icon library with over 2,800 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.
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' }}
/>
)
}