# 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
```bash
# npm
npm install remixicon
# yarn
yarn add remixicon
# pnpm
pnpm install remixicon
# bun
bun add remixicon
```
### React Package
```bash
npm install @remixicon/react
```
### Vue 3 Package
```bash
npm install @remixicon/vue
```
### CDN
```html
```
## Usage Methods
### 1. Webfont (HTML/CSS)
Import CSS and use class names:
```tsx
// Next.js - app/layout.tsx
import 'remixicon/fonts/remixicon.css'
export default function RootLayout({ children }) {
return (
{children}
)
}
// Use in components
```
**With sizing classes:**
```html
```
**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-2x` through `ri-10x`
- `ri-fw` (fixed width)
### 2. React Components
```tsx
import { RiHomeLine, RiSearchFill, RiHeartLine } from "@remixicon/react"
export function MyComponent() {
return (
)
}
```
**Props:**
- `size` - Number (pixels) or string (em, rem)
- `color` - CSS color value
- `className` - CSS class
- Standard SVG props (onClick, style, etc.)
### 3. Vue 3 Components
```vue
```
### 4. Direct SVG
```tsx
// Download SVG file and import
import HomeIcon from '@/icons/home-line.svg'
export function Component() {
return 
}
```
### 5. SVG Sprite
```html
```
```css
.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
```tsx
// Webfont approach
export function Navigation() {
return (
)
}
// React component approach
import { RiHomeLine, RiSearchLine, RiUserLine } from "@remixicon/react"
export function Navigation() {
return (
)
}
```
### Button with Icon
```tsx
import { RiDownloadLine } from "@remixicon/react"
export function DownloadButton() {
return (
)
}
```
### Status Indicators
```tsx
import {
RiCheckboxCircleFill,
RiErrorWarningFill,
RiAlertFill,
RiInformationFill
} from "@remixicon/react"
type Status = 'success' | 'error' | 'warning' | 'info'
export function StatusIcon({ status }: { status: Status }) {
const icons = {
success: ,
error: ,
warning: ,
info:
}
return icons[status]
}
```
### Input with Icon
```tsx
import { RiSearchLine } from "@remixicon/react"
export function SearchInput() {
return (
)
}
```
```css
.input-group {
position: relative;
}
.input-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #666;
}
input {
padding-left: 40px;
}
```
### Dynamic Icon Selection
```tsx
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 ? : null
}
// Usage
```
## Styling & Customization
### Color
```tsx
// Inherit from parent
// React component
```
### Size
```tsx
// CSS class
// Inline style
// React component
```
### Responsive Sizing
```css
.icon {
font-size: 24px;
}
@media (max-width: 768px) {
.icon {
font-size: 20px;
}
}
```
### Animations
```css
.spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```
```tsx
```
### Hover Effects
```css
.icon-button {
transition: color 0.2s;
}
.icon-button:hover {
color: #007bff;
}
```
## Accessibility
### Provide Labels
**Icon-only buttons:**
```tsx
// Or with React
```
### Decorative Icons
Hide from screen readers:
```tsx
// React
```
### Icon with Text
```tsx
```
Text provides context, icon is decorative.
## Framework Integration
### Next.js
```tsx
// app/layout.tsx
import 'remixicon/fonts/remixicon.css'
export default function RootLayout({ children }) {
return (
{children}
)
}
// app/page.tsx
import { RiHomeLine } from "@remixicon/react"
export default function Page() {
return
}
```
### Tailwind CSS
```tsx
```
### CSS Modules
```tsx
import styles from './component.module.css'
import 'remixicon/fonts/remixicon.css'
export function Component() {
return
}
```
## 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:**
```tsx
import 'remixicon/fonts/remixicon.css'
```
**Verify class name:**
```html
```
**Check font loading:**
```css
/* Ensure font-family is applied */
[class^="ri-"], [class*=" ri-"] {
font-family: "remixicon" !important;
}
```
### Icons Look Blurry
Use multiples of 24px for crisp rendering:
```tsx
// Good
// Bad (breaks pixel grid)
```
### Wrong Icon Size
**Set parent font-size:**
```css
.icon-container {
font-size: 24px;
}
```
**Or use size prop:**
```tsx
```
## Best Practices
1. **Choose style consistently** - Use line or fill throughout app
2. **Maintain 24px grid** - Use sizes: 24, 48, 72, 96px
3. **Provide accessibility** - Add aria-labels to icon-only buttons
4. **Use currentColor** - Icons inherit text color by default
5. **Optimize bundle** - Use React package for tree-shaking
6. **Cache webfonts** - CDN or long cache headers
7. **Lazy load icons** - Dynamic import for heavy icon sets
8. **Test on devices** - Ensure icons scale properly
9. **Document usage** - Create icon component library
10. **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