remix-icon_skill

Overview

This skill is a practical guide for implementing RemixIcon, a neutral-style icon library with 3,100+ icons available in both outlined (line) and filled (fill) styles. It explains installation options, naming conventions, integration patterns (webfont, SVG, React, Vue), accessibility, performance tips, and common usage patterns. Use it to quickly add consistent, grid-aligned icons to web apps, design systems, or presentations.

How this skill works

The guide describes how to consume RemixIcon via npm, CDN, direct SVG files, SVG sprites, or official React and Vue packages. It explains the ri-{icon-name}-{style} naming convention, size classes, grid-aligned sizing best practices, and recommended delivery formats (WOFF2 for many icons, individual SVGs or sprites for smaller sets). It also covers accessibility attributes, color control via currentColor, and framework-specific integration snippets.

When to use it

• Adding consistent iconography to web apps, dashboards, or design systems
• Implementing navigation, buttons, status indicators, or media controls
• When you need outlined and filled variants for states and emphasis
• Integrating icons into React, Vue, or static HTML projects
• Embedding icons into design tools and presentations (Figma, PowerPoint)

Best practices

• Prefer webfont (WOFF2) when using many icons; individual SVGs for 1–5 icons; sprites for 5–20 icons
• Use the ri-{name}-{style} naming pattern and maintain 24x24 multiples for crisp rendering
• Use currentColor to let icons inherit text color and keep styling flexible
• Add aria-label for interactive icon-only controls and aria-hidden for purely decorative icons
• Use outlined (line) for neutral UI and filled (fill) for active or emphasized states

Example use cases

• Navigation menu with ri-home-line, ri-search-line, ri-user-line for consistent headers
• Primary call-to-action button using ri-download-line or ri-download-fill depending on emphasis
• Status components mapping states to filled icons (success, error, warning, info)
• React components using @remixicon/react for size and color props in dynamic UIs
• Design work: copy icons into Figma or use the RemixIcon plugin for mockups