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

bash
1npm install remixicon
2# or
3yarn add remixicon
4# or
5pnpm install remixicon

CDN (no installation):

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

React:

bash
1npm install @remixicon/react

Vue 3:

bash
1npm 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:

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

With sizing classes:

html
1<i class="ri-home-line ri-2x"></i>
2<!-- 2em size -->
3<i class="ri-search-line ri-lg"></i>
4<!-- 1.3333em -->
5<i class="ri-heart-fill ri-xl"></i>
6<!-- 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:

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

Inline SVG:

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

3. SVG Sprite

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

css
1.remix-icon {
2  width: 24px;
3  height: 24px;
4  fill: #333;
5}

4. React Integration

jsx
1import { RiHeartFill, RiHomeLine, RiSearchLine } from "@remixicon/react";
2
3function MyComponent() {
4  return (
5    <>
6      <RiHeartFill
7        size={36} // Custom size
8        color="red" // Fill color
9        className="my-icon" // Custom class
10      />
11      <RiHomeLine size={24} />
12      <RiSearchLine size="1.5em" color="#666" />
13    </>
14  );
15}

5. Vue 3 Integration

vue
1<script setup lang="ts">
2import { RiHeartFill, RiHomeLine } from "@remixicon/vue";
3</script>
4
5<template>
6  <RiHeartFill size="36px" color="red" className="my-icon" />
7  <RiHomeLine size="24px" />
8</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:

html
1<button aria-label="Search">
2  <i class="ri-search-line"></i>
3</button>

For decorative icons, use aria-hidden:

html
1<span aria-hidden="true">
2  <i class="ri-star-fill"></i>
3</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:

css
1.icon {
2  color: #333; /* Icon inherits this color */
3}

Maintain 24x24 grid alignment:

css
1/* Good - maintains grid */
2.icon {
3  font-size: 24px;
4}
5.icon {
6  font-size: 48px;
7} /* 24 * 2 */
8
9/* Avoid - breaks grid alignment */
10.icon {
11  font-size: 20px;
12}
13.icon {
14  font-size: 30px;
15}

Framework Integration

Next.js:

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

Tailwind CSS:

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

CSS Modules:

jsx
1import styles from "./component.module.css";
2import "remixicon/fonts/remixicon.css";
3
4<i className={`ri-home-line ${styles.icon}`}></i>;

Advanced Usage

Custom Icon Sizing with CSS

css
1.custom-icon {
2  font-size: 32px;
3  line-height: 1;
4  vertical-align: middle;
5}
6
7/* Responsive sizing */
8@media (max-width: 768px) {
9  .custom-icon {
10    font-size: 24px;
11  }
12}

Icon Animations

css
1.spinning-icon {
2  animation: spin 1s linear infinite;
3}
4
5@keyframes spin {
6  from {
7    transform: rotate(0deg);
8  }
9  to {
10    transform: rotate(360deg);
11  }
12}

Dynamic Icons in React

jsx
1function IconButton({ iconName, filled = false }) {
2    const iconClass = `ri-${iconName}-${filled ? 'fill' : 'line'}`;
3    return <i className={iconClass} />;
4}
5
6// Usage
7<IconButton iconName="home" />
8<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

html
1<nav>
2  <a href="/home">
3    <i class="ri-home-line"></i>
4    <span>Home</span>
5  </a>
6  <a href="/search">
7    <i class="ri-search-line"></i>
8    <span>Search</span>
9  </a>
10  <a href="/profile">
11    <i class="ri-user-line"></i>
12    <span>Profile</span>
13  </a>
14</nav>

Button with Icon

html
1<button class="btn-primary">
2  <i class="ri-download-line"></i>
3  Download
4</button>

Status Indicators

jsx
1// React example
2function StatusIcon({ status }) {
3  const icons = {
4    success: <RiCheckboxCircleFill color="green" />,
5    error: <RiErrorWarningFill color="red" />,
6    warning: <RiAlertFill color="orange" />,
7    info: <RiInformationFill color="blue" />,
8  };
9  return icons[status];
10}

Input with Icon

html
1<div class="input-group">
2  <i class="ri-search-line"></i>
3  <input type="text" placeholder="Search..." />
4</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