tools-only RemixIcon Integration Guide
Installation, usage, customization, and accessibility for RemixIcon library.
Overview
RemixIcon provides 3,100+ icons in outlined (-line) and filled (-fill) styles, built on 24x24px grid.
Icon naming: ri-{name}-{style}
- Examples:
ri-home-line,ri-heart-fill,ri-search-line
Installation
NPM Package
# npm
npm install remixicon
# yarn
yarn add remixicon
# pnpm
pnpm install remixicon
# bun
bun add remixicon
React Package
npm install @remixicon/react
Vue 3 Package
npm install @remixicon/vue
CDN
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css"
rel="stylesheet"
/>
Usage Methods
1. Webfont (HTML/CSS)
Import CSS and use class names:
// Next.js - app/layout.tsx
import 'remixicon/fonts/remixicon.css'
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}
// Use in components
<i className="ri-home-line"></i>
<i className="ri-search-fill"></i>
With sizing classes:
<i className="ri-home-line ri-2x"></i> <!-- 2em -->
<i className="ri-search-line ri-lg"></i> <!-- 1.33em -->
<i className="ri-heart-fill ri-xl"></i> <!-- 1.5em -->
Available sizes:
ri-xxs(0.5em)ri-xs(0.75em)ri-sm(0.875em)ri-1x(1em)ri-lg(1.33em)ri-xl(1.5em)ri-2xthroughri-10xri-fw(fixed width)
2. React Components
import { RiHomeLine, RiSearchFill, RiHeartLine } from "@remixicon/react"
export function MyComponent() {
return (
<div>
<RiHomeLine size={24} />
<RiSearchFill size={32} color="blue" />
<RiHeartLine size="1.5em" className="icon" />
</div>
)
}
Props:
size- Number (pixels) or string (em, rem)color- CSS color valueclassName- CSS class- Standard SVG props (onClick, style, etc.)
3. Vue 3 Components
<script setup lang="ts">
import { RiHomeLine, RiSearchFill } from "@remixicon/vue"
</script>
<template>
<div>
<RiHomeLine :size="24" />
<RiSearchFill :size="32" color="blue" />
</div>
</template>
4. Direct SVG
// Download SVG file and import
import HomeIcon from '@/icons/home-line.svg'
export function Component() {
return <img src={HomeIcon} alt="Home" width={24} height={24} />
}
5. SVG Sprite
<svg className="icon">
<use xlinkHref="path/to/remixicon.symbol.svg#ri-home-line"></use>
</svg>
.icon {
width: 24px;
height: 24px;
fill: currentColor;
}
Icon Categories
20 semantic categories with 3,100+ icons:
Navigation & UI:
- Arrows (arrow-left, arrow-right, arrow-up-down)
- System (settings, delete, add, close, more)
- Editor (bold, italic, link, list, code)
Communication:
- Communication (chat, phone, mail, message)
- User (user, account, team, contacts)
Media & Content:
- Media (play, pause, volume, camera, video)
- Document (file, folder, article, draft)
- Design (brush, palette, magic, crop)
Business & Commerce:
- Business (briefcase, pie-chart, bar-chart)
- Finance (money, wallet, bank-card, coin)
- Map (map, pin, compass, navigation)
Objects & Places:
- Buildings (home, bank, hospital, store)
- Device (phone, laptop, tablet, printer)
- Food (restaurant, cake, cup, knife)
- Weather (sun, cloud, rain, moon)
Development & Logos:
- Development (code, terminal, bug, git-branch)
- Logos (github, twitter, facebook, google)
Health & Medical:
- Health (heart-pulse, capsule, stethoscope)
Common Patterns
Navigation Menu
// Webfont approach
export function Navigation() {
return (
<nav>
<a href="/home">
<i className="ri-home-line"></i>
<span>Home</span>
</a>
<a href="/search">
<i className="ri-search-line"></i>
<span>Search</span>
</a>
<a href="/profile">
<i className="ri-user-line"></i>
<span>Profile</span>
</a>
</nav>
)
}
// React component approach
import { RiHomeLine, RiSearchLine, RiUserLine } from "@remixicon/react"
export function Navigation() {
return (
<nav>
<a href="/home">
<RiHomeLine size={20} />
<span>Home</span>
</a>
<a href="/search">
<RiSearchLine size={20} />
<span>Search</span>
</a>
<a href="/profile">
<RiUserLine size={20} />
<span>Profile</span>
</a>
</nav>
)
}
Button with Icon
import { RiDownloadLine } from "@remixicon/react"
export function DownloadButton() {
return (
<button className="btn-primary">
<RiDownloadLine size={18} />
<span>Download</span>
</button>
)
}
Status Indicators
import {
RiCheckboxCircleFill,
RiErrorWarningFill,
RiAlertFill,
RiInformationFill
} from "@remixicon/react"
type Status = 'success' | 'error' | 'warning' | 'info'
export function StatusIcon({ status }: { status: Status }) {
const icons = {
success: <RiCheckboxCircleFill color="green" size={20} />,
error: <RiErrorWarningFill color="red" size={20} />,
warning: <RiAlertFill color="orange" size={20} />,
info: <RiInformationFill color="blue" size={20} />
}
return icons[status]
}
Input with Icon
import { RiSearchLine } from "@remixicon/react"
export function SearchInput() {
return (
<div className="input-group">
<RiSearchLine size={20} className="input-icon" />
<input type="text" placeholder="Search..." />
</div>
)
}
.input-group {
position: relative;
}
.input-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #666;
}
input {
padding-left: 40px;
}
Dynamic Icon Selection
import { RiHomeLine, RiHeartFill, RiStarLine } from "@remixicon/react"
const iconMap = {
home: RiHomeLine,
heart: RiHeartFill,
star: RiStarLine,
}
export function DynamicIcon({ name, size = 24 }: { name: string; size?: number }) {
const Icon = iconMap[name]
return Icon ? <Icon size={size} /> : null
}
// Usage
<DynamicIcon name="home" size={24} />
Styling & Customization
Color
// Inherit from parent
<i className="ri-home-line" style={{ color: 'blue' }}></i>
// React component
<RiHomeLine color="blue" />
<RiHomeLine color="#ff0000" />
<RiHomeLine color="rgb(255, 0, 0)" />
Size
// CSS class
<i className="ri-home-line ri-2x"></i>
// Inline style
<i className="ri-home-line" style={{ fontSize: '32px' }}></i>
// React component
<RiHomeLine size={32} />
<RiHomeLine size="2em" />
Responsive Sizing
.icon {
font-size: 24px;
}
@media (max-width: 768px) {
.icon {
font-size: 20px;
}
}
Animations
.spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<i className="ri-loader-4-line spin"></i>
Hover Effects
.icon-button {
transition: color 0.2s;
}
.icon-button:hover {
color: #007bff;
}
Accessibility
Provide Labels
Icon-only buttons:
<button aria-label="Search">
<i className="ri-search-line"></i>
</button>
// Or with React
<button aria-label="Search">
<RiSearchLine size={20} />
</button>
Decorative Icons
Hide from screen readers:
<span aria-hidden="true">
<i className="ri-star-fill"></i>
</span>
// React
<span aria-hidden="true">
<RiStarFill size={16} />
</span>
Icon with Text
<button>
<RiDownloadLine size={18} aria-hidden="true" />
<span>Download</span>
</button>
Text provides context, icon is decorative.
Framework Integration
Next.js
// app/layout.tsx
import 'remixicon/fonts/remixicon.css'
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}
// app/page.tsx
import { RiHomeLine } from "@remixicon/react"
export default function Page() {
return <RiHomeLine size={24} />
}
Tailwind CSS
<i className="ri-home-line text-2xl text-blue-500"></i>
<RiHomeLine size={24} className="text-blue-500 hover:text-blue-600" />
CSS Modules
import styles from './component.module.css'
import 'remixicon/fonts/remixicon.css'
export function Component() {
return <i className={`ri-home-line ${styles.icon}`}></i>
}
Performance Considerations
Webfont (Recommended for Multiple Icons)
Pros:
- Single HTTP request
- All icons available
- Easy to use
Cons:
- 179KB WOFF2 file
- Loads all icons even if unused
Best for: Apps using 10+ different icons
Individual SVG (Recommended for Few Icons)
Pros:
- Only load what you need
- Smallest bundle size
- Tree-shakeable with React package
Cons:
- Multiple imports
Best for: Apps using 1-5 icons
React/Vue Package
Pros:
- Tree-shakeable (only imports used icons)
- TypeScript support
- Component API
Cons:
- Slightly larger than raw SVG
- Requires React/Vue
Best for: React/Vue apps with TypeScript
Troubleshooting
Icons Not Displaying
Check CSS import:
import 'remixicon/fonts/remixicon.css'
Verify class name:
<!-- Correct -->
<i className="ri-home-line"></i>
<!-- Incorrect -->
<i className="ri-home"></i>
<i className="home-line"></i>
Check font loading:
/* Ensure font-family is applied */
[class^="ri-"], [class*=" ri-"] {
font-family: "remixicon" !important;
}
Icons Look Blurry
Use multiples of 24px for crisp rendering:
// Good
<RiHomeLine size={24} />
<RiHomeLine size={48} />
// Bad (breaks pixel grid)
<RiHomeLine size={20} />
<RiHomeLine size={30} />
Wrong Icon Size
Set parent font-size:
.icon-container {
font-size: 24px;
}
Or use size prop:
<RiHomeLine size={24} />
Best Practices
- Choose style consistently - Use line or fill throughout app
- Maintain 24px grid - Use sizes: 24, 48, 72, 96px
- Provide accessibility - Add aria-labels to icon-only buttons
- Use currentColor - Icons inherit text color by default
- Optimize bundle - Use React package for tree-shaking
- Cache webfonts - CDN or long cache headers
- Lazy load icons - Dynamic import for heavy icon sets
- Test on devices - Ensure icons scale properly
- Document usage - Create icon component library
- Version lock - Pin RemixIcon version for consistency
Resources
- Website: https://remixicon.com
- GitHub: https://github.com/Remix-Design/RemixIcon
- React Package: @remixicon/react
- Vue Package: @remixicon/vue
- License: Apache 2.0
- Total Icons: 3,100+
- Current Version: 4.7.0