Remix Icon

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

bashCopy code
npm install remixicon
# or
yarn add remixicon
# or
pnpm install remixicon

CDN (no installation):

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

React:

bashCopy code
npm install @remixicon/react

Vue 3:

bashCopy code
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:

Copy code
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:

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

With sizing classes:

htmlCopy code
<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:

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

Inline SVG:

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

3. SVG Sprite

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

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

4. React Integration

jsxCopy code
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

vueCopy code
<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:

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:

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

For decorative icons, use aria-hidden:

htmlCopy code
<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:

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

Maintain 24x24 grid alignment:

cssCopy code
/* 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:

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

Tailwind CSS:

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

CSS Modules:

jsxCopy code
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

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

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

Icon Animations

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

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

Dynamic Icons in React

jsxCopy code
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

htmlCopy code
<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

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

Status Indicators

jsxCopy code
// 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

htmlCopy code
<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