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
Analyze your menu's cost structure, identify profit margins by item, and discover pricing optimization opportunities. You'll uncover which menu items are profit drivers versus margin drains, and receive data-driven recommendations for pricing adjustments, menu engineering, and cost reduction strategies. This helps you increase gross profit while maintaining competitive pricing.
You can comprehensively evaluate healthcare datasets for open data readiness, generating detailed assessment reports with actionable remediation steps. Claude analyzes data quality, metadata completeness, privacy compliance, and accessibility standards, then produces structured documentation that meets FAIR principles and healthcare governance requirements. You'll accelerate your open data initiatives by automating compliance checks and creating publication-ready documentation in minutes.
You'll develop comprehensive bar and nightclub operations strategies that drive revenue growth and customer loyalty. From designing tiered VIP programs to optimizing event scheduling and pricing, this skill helps you make data-informed decisions that increase profitability while improving customer experience. Get actionable playbooks for staff management, inventory optimization, and customer retention.
This skill helps you develop professional pastry recipes using baker's percentages and ingredient science. You can scale recipes accurately for any batch size, troubleshoot common baking failures, and standardize recipes for consistent results. Get detailed guidance on ratios, ingredient interactions, and technique adjustments.
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.
You get expert wine pairing recommendations tailored to dishes, menus, and customer preferences. The skill generates persuasive upselling scripts, customer interaction strategies, and educational talking points to increase wine sales and customer satisfaction. You can instantly create responses to difficult customer scenarios, handle objections, and suggest premium options with confidence.
Benchmark your restaurant outlets against each other and industry standards to uncover operational gaps, consistency issues, and growth opportunities. You'll receive detailed comparative analysis across sales, customer satisfaction, staff efficiency, and menu performance, plus actionable recommendations to standardize operations while respecting local market differences.
You can perform deep audits of your project dependencies across multiple package ecosystems, identifying security vulnerabilities with CVSS scores, outdated versions, license incompatibilities, and unused packages. The skill generates a prioritized upgrade roadmap that balances security urgency, stability risk, and effort cost—helping you reduce supply chain risk and technical debt without destabilizing production.