Remix Icon

Overview

Remix Icon is a widely acclaimed, open-source neutral-style system symbol library crafted for product designers and frontend developers. With over 2,800+ icons covering business, communication, devices, document, and system categories, every icon is constructed on a strict 24x24 pixel grid with consistent visual weights in both Line (Outline) and Fill styles.

Key Features

• 🎯 2,800+ Grid-Aligned Icons: Designed on a 24x24 grid with optical balance and consistent stroke weight across Outline and Fill variations.
• 📦 Multi-Format & Framework Support: Available as SVG sprites, font icons (remixicon.css), React (@remixicon/react), Vue, and Figma asset components.
• ⚡ Zero Distortion & Scalable: Pure vector paths optimized for crisp rendering on high-DPI displays with complete currentColor styling support.
• 📜 Apache 2.0 Open License: 100% free for both personal and commercial digital products without attribution requirements.

Installation & Quick Start

# React component package
npm install @remixicon/react
# Or CSS web font
npm install remixicon

import React from 'react';
import { RiHome5Line, RiSearch2Line, RiSettings4Fill } from '@remixicon/react';

export function NavigationBar() {
  return (
    <nav className="flex items-center gap-6 p-4 rounded-2xl bg-neutral-900 text-white">
      <button className="flex items-center gap-2 hover:text-indigo-400 transition-colors">
        <RiHome5Line size={20} />
        <span>Dashboard</span>
      </button>
      <button className="flex items-center gap-2 hover:text-indigo-400 transition-colors">
        <RiSearch2Line size={20} />
        <span>Search</span>
      </button>
      <RiSettings4Fill size={20} className="ml-auto text-neutral-400 hover:text-white cursor-pointer" />
    </nav>
  );
}

Why Choose Remix Icon?

• Product UI & Design Systems: Highly consistent neutral visual aesthetics make it one of the most versatile icon foundations for enterprise SaaS.
• Figma to Code Alignment: Direct correspondence between official Figma community UI kits and @remixicon/react component names simplifies design handoff.