R
Rare Icons
GETTING STARTED/Introduction

Introduction

Rare Icons is a premium icon library built specifically for React. Every icon is a self-contained component with smooth animations, consistent styling, and zero dependencies beyond motion.

What is Rare Icons?

Rare Icons is a premium icon library built specifically for React. Every icon is a self-contained component with smooth animations, consistent styling, and zero dependencies beyond motion.

What's Inside
Free Tier

200+ stroke icons covering navigation, actions, media, and system UI. Fully open-source with an MIT license. Drop them into any React project — commercial or personal.

Pro License

500+ icons across 5 visual styles (Stroke, Solid, Contrast, Duo Stroke, Duo Solid). Includes Figma source files, physics-based motion presets, and priority icon requests. One-time $29 purchase, no subscription.

Design Principles
24px Grid: Every icon sits on a consistent 24×24 pixel grid. This means they align perfectly with text, buttons, and other UI elements at any scale.
2px Stroke Weight: The default stroke width is 2px, matching the optical weight of most system fonts. You can override this per-icon with the strokeWidth prop.
Tree-Shakable: Only the icons you actually import get bundled. A typical app using 30 icons adds less than 15kb to your final bundle.
Motion-Ready: Every icon ships with a subtle hover/interaction animation powered by Motion (formerly Framer Motion). Toggle it off with a single prop.