remix-icon
CommunityIcons for every UI, instantly.
Authormrgoonie
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Finding consistent, high-quality icons for UI design and development can be a challenge, often leading to fragmented visual styles. This skill provides a comprehensive library of 3,100+ neutral-style icons in both outlined and filled variants, ensuring visual consistency and speeding up UI development.
Core Features & Use Cases
- Dual Styles: Access icons in both
line(outlined) andfill(filled) styles for versatile design. - Easy Integration: Use with webfonts, SVG, React, Vue, or directly in design tools.
- Semantic Categories: Quickly find the right icon across 20 organized categories.
- Use Case: Rapidly build a navigation menu with visually consistent icons, easily switching between outlined icons for inactive states and filled icons for active states.
Quick Start
1. Install via NPM:
npm install remixicon
2. Link CSS in your project (e.g., in index.html or main CSS file):
<link href="node_modules/remixicon/fonts/remixicon.css" rel="stylesheet" />
3. Use in HTML:
<i class="ri-home-line"></i> <i class="ri-search-fill ri-2x"></i>
Dependency Matrix
Required Modules
remixicon@remixicon/react@remixicon/vue
Components
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: remix-icon Download link: https://github.com/mrgoonie/claudekit-skills/archive/main.zip#remix-icon Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.