skills.rest
AIA-11-HN-MIB
AIA-11-HN-MIBOFFICIAL
Explore all skills by this author →
GitHub

remix-icon

Provide 3,100+ RemixIcon icons in line and fill variants for web and mobile UI.

1|Updated Oct 31, 2025
Search Tags:#frontend#react#ui/ux#vue#icons#svg#design-system
One-click install
npx skills add https://github.com/AIA-11-HN-MIB/MIB-MockInterviewAIBot --skill remix-icon-aia-11-hn-mib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remix-icon
Source: https://github.com/AIA-11-HN-MIB/MIB-MockInterviewAIBot/tree/main/.claude/skills/remix-icon
Command: npx skills add https://github.com/AIA-11-HN-MIB/MIB-MockInterviewAIBot --skill remix-icon-aia-11-hn-mib

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remixicon, @remixicon/react, @remixicon/vue.

What problem does it solve?

Finding and consistently integrating high-quality icons into applications can be a design and development bottleneck. This skill provides a comprehensive guide to RemixIcon, offering a vast library of consistent, neutral-style icons to streamline UI development.

Core Features & Use Cases

  • Extensive Icon Library: Access over 3,100 icons in both outlined and filled styles for diverse design needs.
  • Flexible Integration: Implement icons using webfonts, direct SVG, SVG sprites, or dedicated React/Vue components.
  • Design Tool Compatibility: Seamlessly integrate icons into Figma, Sketch, Adobe XD, and presentations.
  • Use Case: Quickly add a "home" icon to a navigation menu, a "search" icon to an input field, or a "heart" icon to a like button, ensuring visual consistency across your application.

Quick Start

Ask the remix-icon skill how to install RemixIcon using NPM and display a home icon in HTML.

Frequently Asked Questions about remix-icon

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add icons to my React or Vue application?▼

RemixIcon provides dedicated npm packages (@remixicon/react and @remixicon/vue) that let you import and use icons as components. Install via npm, import the icon component you need, and render it directly in your JSX or template. This ensures consistent styling and easy customization across your app.

Can I use RemixIcon icons in HTML with CSS?▼

Yes, RemixIcon supports webfont and SVG sprite integration for HTML. Use the ri-{icon-name}-{style} class naming convention with the provided CSS or load SVG sprites directly. This method works for static sites and doesn't require a framework.

What icon formats and variants does RemixIcon offer?▼

RemixIcon provides 3,100+ icons available in line and fill variants, conforming to a 24x24 grid. Icons support multiple formats: webfont, SVG, React components, Vue components, and sprite sheets, making them adaptable to any web or mobile design system.

Does RemixIcon work with design tools like Figma and Sketch?▼

Yes, RemixIcon integrates seamlessly into Figma, Sketch, Adobe XD, and presentation software. The consistent 24x24 grid and neutral style ensure icons maintain visual coherence whether used in design mockups or exported to development.

Can I search RemixIcon icons in multiple languages?▼

RemixIcon supports bilingual search in English and Chinese, helping you find the right icon regardless of language preference. This makes the library accessible to teams and projects working across different locales.

Related Skills

Explore More Design & Creative Skills→
brixtonphambrixtonpham

remix-icon

Integrate RemixIcon webfonts and SVG icons into HTML, React, and Vue projects.

Community
Advanced
augustoheissaugustoheiss

agency-ui-designer

Create tokenized UI design systems with WCAG AA accessibility and developer handoff packages.

Community
Advanced
huydepzai121huydepzai121
3

remix-icon

Guide RemixIcon integration across webfont, SVG, React, and Vue.

Community
Intermediate
moughamirmoughamir

icon-set-generator

Generate cohesive SVG icon sets with shared style specifications.

Community
Intermediate