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):

1. WOFF2: 179KB (recommended)
2. WOFF: 245KB
3. TTF: 579KB
4. 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:

1. CSS file is loaded: <link href="remixicon.css" rel="stylesheet" />
2. Class name syntax: ri-{name}-{style} (e.g., ri-home-line)
3. Font files are accessible (check browser Network tab)
4. 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