RemixIcon Implementation Guide

RemixIcon is a comprehensive icon library with 3,100+ meticulously designed icons available in both outlined (-line ) and filled (-fill ) styles. All icons are built on a 24x24 pixel grid for perfect alignment and consistency.

When to Use This Skill

Use RemixIcon when:

• Adding icons to web applications, mobile apps, or design systems

• Building UI components that need consistent iconography

• Implementing navigation, buttons, status indicators, or media controls

• Creating presentations, documents, or design mockups

• Need bilingual icon search (English + Chinese)

• Require both outlined and filled icon variants

Quick Start

Installation

NPM (recommended for web projects):

npm install remixicon

or

yarn add remixicon

or

pnpm install remixicon

CDN (no installation):

<link href="https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css" rel="stylesheet" />

React:

npm install @remixicon/react

Vue 3:

npm install @remixicon/vue

Icon Naming Convention

Pattern: ri-{icon-name}-{style}

Where:

• icon-name : Descriptive name in kebab-case (e.g., arrow-right , home , user-add )

• style : Either line (outlined) or fill (filled)

Examples:

ri-home-line # Home icon, outlined ri-home-fill # Home icon, filled ri-arrow-right-line # Right arrow, outlined ri-search-line # Search icon, outlined ri-heart-fill # Heart icon, filled

Usage Patterns

1. Webfont (HTML/CSS)

Basic usage:

<i class="ri-admin-line"></i> <i class="ri-home-fill"></i>

With sizing classes:

<i class="ri-home-line ri-2x"></i> <!-- 2em size --> <i class="ri-search-line ri-lg"></i> <!-- 1.3333em --> <i class="ri-heart-fill ri-xl"></i> <!-- 1.5em -->

Available size classes:

• ri-xxs (0.5em)

• ri-xs (0.75em)

• ri-sm (0.875em)

• ri-1x (1em)

• ri-lg (1.3333em)

• ri-xl (1.5em)

• ri-2x through ri-10x (2em - 10em)

• ri-fw (fixed width for alignment)

2. Direct SVG

Download and use:

<img height="32" width="32" src="path/to/admin-fill.svg" />

Inline SVG:

<svg viewBox="0 0 24 24" fill="currentColor"> <path d="...icon path data..."/> </svg>

3. SVG Sprite

<svg class="remix-icon"> <use xlink:href="path/to/remixicon.symbol.svg#ri-admin-fill"></use> </svg>

.remix-icon { width: 24px; height: 24px; fill: #333; }

4. React Integration

import { RiHeartFill, RiHomeLine, RiSearchLine } from "@remixicon/react";

function MyComponent() { return ( <> <RiHeartFill size={36} // Custom size color="red" // Fill color className="my-icon" // Custom class /> <RiHomeLine size={24} /> <RiSearchLine size="1.5em" color="#666" /> </> ); }

5. Vue 3 Integration

<script setup lang="ts"> import { RiHeartFill, RiHomeLine } from "@remixicon/vue"; </script>

<template> <RiHeartFill size="36px" color="red" className="my-icon" /> <RiHomeLine size="24px" /> </template>

Icon Categories

Icons are organized into 20 semantic categories:

Category Examples Use Cases

Arrows arrow-left, arrow-up, corner-up-left Navigation, directions, flows

Buildings home, bank, hospital, store Locations, facilities

Business briefcase, archive, pie-chart Commerce, analytics

Communication chat, phone, mail, message Messaging, contact

Design brush, palette, magic, crop Creative tools

Development code, terminal, bug, git-branch Developer tools

Device phone, laptop, tablet, printer Hardware, electronics

Document file, folder, article, draft Files, content

Editor bold, italic, link, list Text formatting

Finance money, wallet, bank-card, coin Payments, transactions

Food restaurant, cake, cup, knife Dining, beverages

Health & Medical health, heart-pulse, capsule Healthcare, wellness

Logos github, twitter, facebook Brand icons

Map map, pin, compass, navigation Location, directions

Media play, pause, volume, camera Multimedia controls

System settings, download, delete, add UI controls, actions

User & Faces user, account, team, contacts Profiles, people

Weather sun, cloud, rain, moon Climate, forecast

Others miscellaneous icons General purpose

Finding Icons

1. Browse by Category

Visit https://remixicon.com and navigate categories to visually browse icons.

2. Search with Keywords

Use English or Chinese keywords. Icons have comprehensive tags for discoverability.

Example searches:

• "home" → home, home-2, home-3, home-gear, home-wifi

• "arrow" → arrow-left, arrow-right, arrow-up, arrow-down

• "user" → user, user-add, user-follow, account-circle

3. Consider Icon Variants

Many icons have numbered variants (home, home-2, home-3) offering stylistic alternatives.

Best Practices

Choosing Styles

Line (Outlined) Style:

• Use for: Clean, minimal interfaces

• Best with: Light backgrounds, high contrast needs

• Examples: Navigation menus, toolbars, forms

Fill (Filled) Style:

• Use for: Emphasis, active states, primary actions

• Best with: Buttons, selected items, important indicators

• Examples: Active nav items, primary CTAs, notifications

Accessibility

Always provide aria-labels for icon-only elements:

<button aria-label="Search"> <i class="ri-search-line"></i> </button>

For decorative icons, use aria-hidden:

<span aria-hidden="true"> <i class="ri-star-fill"></i> </span>

Performance

For web applications:

• Use webfonts (WOFF2: 179KB) for multiple icons

• Use individual SVGs for 1-5 icons only

• Use SVG sprites for 5-20 icons

• Prefer CDN for faster global delivery

Font formats by size (smallest to largest):

• WOFF2: 179KB (recommended)

• WOFF: 245KB

• TTF: 579KB

• EOT: 579KB (legacy IE support)

Color and Sizing

Use currentColor for flexibility:

.icon { color: #333; /* Icon inherits this color */ }

Maintain 24x24 grid alignment:

/* Good - maintains grid / .icon { font-size: 24px; } .icon { font-size: 48px; } / 24 * 2 */

/* Avoid - breaks grid alignment */ .icon { font-size: 20px; } .icon { font-size: 30px; }

Framework Integration

Next.js:

import '@/styles/remixicon.css'; // In _app.js or layout import { RiHomeLine } from "@remixicon/react";

Tailwind CSS:

<i class="ri-home-line text-2xl text-blue-500"></i>

CSS Modules:

import styles from './component.module.css'; import 'remixicon/fonts/remixicon.css';

<i className={ri-home-line ${styles.icon}}></i>

Advanced Usage

Custom Icon Sizing with CSS

.custom-icon { font-size: 32px; line-height: 1; vertical-align: middle; }

/* Responsive sizing */ @media (max-width: 768px) { .custom-icon { font-size: 24px; } }

Icon Animations

.spinning-icon { animation: spin 1s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

Dynamic Icons in React

function IconButton({ iconName, filled = false }) { const iconClass = ri-${iconName}-${filled ? 'fill' : 'line'}; return <i className={iconClass} />; }

// Usage <IconButton iconName="home" /> <IconButton iconName="heart" filled />

Design Tool Integration

Figma Plugin

Install the official RemixIcon plugin for Figma:

• Plugin: RemixIcon

• URL: https://www.figma.com/community/plugin/1089569154784319246/remixicon

• Feature: Direct icon access within Figma workspace

Copy to Design Tools

Icons can be directly copied from https://remixicon.com to:

• Sketch

• Figma (without plugin)

• Adobe XD

• Adobe Illustrator

PowerPoint & Keynote

Use RemixIcon-Slides for direct integration:

• Repository: https://github.com/Remix-Design/RemixIcon-Slides

• Feature: Edit icon styles directly in presentations

Common Patterns

Navigation Menu

<nav> <a href="/home"> <i class="ri-home-line"></i> <span>Home</span> </a> <a href="/search"> <i class="ri-search-line"></i> <span>Search</span> </a> <a href="/profile"> <i class="ri-user-line"></i> <span>Profile</span> </a> </nav>

Button with Icon

<button class="btn-primary"> <i class="ri-download-line"></i> Download </button>

Status Indicators

// React example function StatusIcon({ status }) { const icons = { success: <RiCheckboxCircleFill color="green" />, error: <RiErrorWarningFill color="red" />, warning: <RiAlertFill color="orange" />, info: <RiInformationFill color="blue" /> }; return icons[status]; }

Input with Icon

<div class="input-group"> <i class="ri-search-line"></i> <input type="text" placeholder="Search..." /> </div>

Troubleshooting

Icons not displaying

Check:

• CSS file is loaded: <link href="remixicon.css" rel="stylesheet" />

• Class name syntax: ri-{name}-{style} (e.g., ri-home-line )

• Font files are accessible (check browser Network tab)

• No font-family override conflicting with .ri-* classes

Wrong icon size

Solutions:

• Use size classes: ri-lg , ri-2x , etc.

• Set parent font-size property

• Ensure line-height: 1 for proper alignment

• Use vertical-align: middle if needed

Icons look blurry

Causes:

• Non-integer font sizes breaking pixel grid

• Browser zoom levels

• Transform properties causing subpixel rendering

Fix: Use multiples of 24px (24, 48, 72, 96) for crisp rendering

Resources

• Website: https://remixicon.com

• GitHub: https://github.com/Remix-Design/RemixIcon

• NPM: https://www.npmjs.com/package/remixicon

• React Package: @remixicon/react

• Vue Package: @remixicon/vue

• License: Apache 2.0 (free for personal and commercial use)

• Total Icons: 3,100+

• Current Version: 4.7.0

Support

• Issues: https://github.com/Remix-Design/RemixIcon/issues

• Email: jimmy@remixdesign.cn

• Twitter/X: @RemixDesignHQ

Version History

• v4.7.0 (Latest): 3,100+ icons with React and Vue packages

• Full changelog available on GitHub releases