# Remix Icon — Open-Source Neutral-Style Icon System

> A set of open-source neutral-style icons designed for clarity and consistency, offering 2,800+ icons in line and fill variants with React, Vue, SVG, and web font support.

## Install

Save in your project root:

# Remix Icon — Open-Source Neutral-Style Icon System

## Quick Use
```bash
npm install remixicon
# Then in your HTML or framework:
# <link href="node_modules/remixicon/fonts/remixicon.css" rel="stylesheet">
# <i class="ri-home-line"></i>
```
```jsx
// Or with React:
import { RiHomeLine } from "@remixicon/react";
<RiHomeLine size={24} />
```

## Introduction
Remix Icon is a set of open-source icons crafted for modern interfaces. Every icon follows a neutral design language that avoids strong stylistic opinions, making the set suitable for products, dashboards, documentation, and mobile applications across different design systems.

## What Remix Icon Does
- Provides 2,800+ icons organized into 24 categories (system, business, media, etc.)
- Offers each icon in both line (outline) and fill (solid) variants
- Ships as SVG files, a web font with CSS classes, and framework components
- Supports React, Vue, and Angular through dedicated component packages
- Follows a 24x24 pixel grid with consistent stroke width and visual weight

## Architecture Overview
The icon source files are individual SVGs maintained in a categorized directory structure. A build pipeline compiles these into a web font (WOFF2, WOFF, TTF) with a companion CSS file mapping class names to Unicode codepoints. Separate packages for React and Vue wrap each SVG as a tree-shakeable component. The npm package includes both the font and raw SVG files.

## Self-Hosting & Configuration
- Install via npm, yarn, or pnpm and import the CSS or component package
- Use the CDN link for quick prototyping without a build step
- For tree-shaking, import individual icons from the React or Vue package
- Customize icon size and color through CSS or component props
- Download selected icons as SVGs from the remixicon.com website

## Key Features
- Neutral design style works across different product aesthetics and brand guidelines
- Consistent 24x24 grid ensures uniform sizing and alignment in layouts
- Dual variants (line and fill) for every icon enable state and emphasis changes
- Apache 2.0 license permits commercial use with no attribution required
- Lightweight web font at approximately 100KB for the full set (WOFF2)

## Comparison with Similar Tools
- **Material Design Icons** — Google's icon set; tightly coupled to Material Design language
- **Lucide** — community fork of Feather; similar stroke style but smaller set
- **Tabler Icons** — MIT-licensed stroke icons; consistent but only outline style
- **Heroicons** — Tailwind team's set; two sizes (20px, 24px) but fewer total icons
- **Phosphor Icons** — six weight variants per icon; more flexibility but larger bundle

## FAQ
**Q: Can I use Remix Icon in a commercial project?**
A: Yes. Remix Icon is released under the Apache 2.0 license, which permits commercial use, modification, and redistribution.

**Q: How do I use only specific icons to reduce bundle size?**
A: Import individual components from @remixicon/react or @remixicon/vue. Tree-shaking will exclude unused icons from the final bundle.

**Q: Are the icons accessible?**
A: The SVG components include role="img" by default. Add aria-label for icons that convey meaning, or aria-hidden="true" for decorative icons.

**Q: How often are new icons added?**
A: The project receives periodic updates with new icons based on community requests and design trend coverage.

## Sources
- https://github.com/Remix-Design/RemixIcon
- https://remixicon.com

---
Source: https://tokrepo.com/en/workflows/asset-d3fc5819
Author: AI Open Source