Remix Icon
Implement 3,100+ open-source icons with RemixIcon in web & mobile apps
What You Can Do
You can quickly integrate RemixIcon into web applications, mobile apps, and design systems to add professional, consistent iconography. The skill guides you through multiple implementation methods—webfonts, SVG, React components, and Vue—so you can choose the approach that fits your project architecture. You'll learn naming conventions, styling techniques, and best practices for maintaining visual consistency across navigation, buttons, status indicators, and custom components.
Features
Example Output
React Component Implementation:
import { RiHomeLine, RiSearchLine, RiHeartFill } from '@remixicon/react';
export function Navigation() {
return (
<nav>
<RiHomeLine size={24} className="nav-icon" />
<RiSearchLine size={24} />
<RiHeartFill size={24} color="#ff0000" />
</nav>
);
}
Webfont HTML Usage:
<button><i class="ri-arrow-right-line"></i> Next</button>
<span class="ri-check-line" style="color: green; font-size: 20px;"></span>
Vue 3 Component:
<template>
<div class="toolbar">
<RiSaveLine size="24" />
<RiDeleteBinFill size="24" color="red" />
</div>
</template>
What's Included
- SKILL.md: Complete RemixIcon implementation guide with installation, naming conventions, and usage patterns
- Icon Browser Checklist: Reference for common icon categories (navigation, media, status, UI controls)
- Integration Templates: Code snippets for webfont, SVG, React, and Vue 3 implementations
- Styling & Customization Framework: CSS techniques for sizing, colors, animations, and responsive behavior
- Design System Workflow: Best practices for maintaining icon consistency across projects
Who It's For
- Frontend developers building web applications and design systems
- React and Vue developers integrating component-based iconography
- UI/UX designers prototyping interfaces with consistent icon sets
- Mobile app developers using icon libraries for cross-platform consistency
- Product teams establishing visual design standards and component libraries
Best For
- Adding icons to navigation menus, toolbars, and button components
- Building reusable icon systems within design frameworks
- Creating status indicators, alerts, and interactive UI feedback
- Prototyping and mockups requiring professional iconography
- Establishing bilingual or international design systems
You might also like
Generate comprehensive banquet event runsheets, minute-by-minute timelines, and detailed service choreography for events of any size. This skill orchestrates every element of banquet service—from staff assignments and vendor coordination to course timing and contingency triggers—reducing planning hours to minutes while ensuring flawless execution.
Create comprehensive, progressive wine tasting curricula tailored to your students' level, from novice to advanced. Generate standardized assessment rubrics that measure tasting proficiency objectively, and design blind tasting protocols that teach accurate varietal and region identification. Use these tools to build cohesive, measurable wine education programs that scale from small workshops to multi-year sommelier training.
Upload your food and beverage cost data and receive comprehensive variance analysis, trend identification, and actionable cost reduction recommendations. The skill automatically categorizes expenses, compares actual vs. budgeted costs, and generates clear reports highlighting areas of concern and opportunity. You get variance percentages, trends across periods, and specific remediation strategies all in one structured output.
This skill analyzes the gap between expected and actual inventory levels, pinpoints root causes of variance, and reconciles cost differences across your supply chain. You'll discover hidden shrinkage, pricing misalignments, and data entry errors—then generate actionable corrective reports to improve inventory accuracy and reduce financial loss.
This skill analyzes your food and beverage costs against established standards, pinpointing variances and their root causes with quantified financial impact. You get detailed variance reports, root cause analysis, and prioritized corrective actions ranked by profitability impact. It's designed for restaurant managers, food service directors, and cost analysts who need to optimize F&B spending and quickly identify where money is leaking.
Standardize your recipes with precise instructions, ingredient lists, and portion guidance tailored to your kitchen's needs. Train your staff with structured protocols, quality control checklists, and food safety documentation. Generate cost analyses, workflow optimizations, and supplier coordination templates to streamline daily operations and reduce waste.
Create personalized wine recommendations tailored to your customers' preferences, meal selections, and budget. The skill provides detailed sommelier-level pairing analysis with accessible tasting notes that enhance the dining experience. You'll generate customer-appropriate explanations that feel natural in conversation while building confidence in wine selections.
Optimize banquet menus for profitability while balancing food costs, guest preferences, and kitchen capacity constraints. Generate staffing deployment plans, service timelines, and station assignments that ensure smooth execution. Manage dietary requirements and preferences while maintaining kitchen efficiency and guest satisfaction.