Agent skill

Remix Icon

Guide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles.

GPL-3.0Auto-check passedFrontend & Design

Install Remix Icon

skills CLI

$ npx skills add einverne/dotfiles --skill remix-icon -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install einverne/dotfiles remix-icon --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/einverne/dotfiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/claude/skills/remix-icon .claude/skills/remix-icon && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "remix-icon" agent skill from https://github.com/einverne/dotfiles/tree/master/claude/skills/remix-icon into .claude/skills/remix-icon/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remix-icon", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/einverne/dotfiles/tree/master/claude/skills/remix-icon

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add einverne/dotfiles --skill remix-icon -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install einverne/dotfiles remix-icon --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/einverne/dotfiles.git skills-src && mkdir -p .agents/skills && cp -r skills-src/claude/skills/remix-icon .agents/skills/remix-icon && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "remix-icon" agent skill from https://github.com/einverne/dotfiles/tree/master/claude/skills/remix-icon into .agents/skills/remix-icon/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remix-icon", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add einverne/dotfiles --skill remix-icon -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install einverne/dotfiles remix-icon --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/einverne/dotfiles.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/claude/skills/remix-icon .cursor/skills/remix-icon && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "remix-icon" agent skill from https://github.com/einverne/dotfiles/tree/master/claude/skills/remix-icon into .cursor/skills/remix-icon/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remix-icon", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/einverne/dotfiles.git --path claude/skills/remix-icon

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add einverne/dotfiles --skill remix-icon -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install einverne/dotfiles remix-icon --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/einverne/dotfiles.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/claude/skills/remix-icon .gemini/skills/remix-icon && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "remix-icon" agent skill from https://github.com/einverne/dotfiles/tree/master/claude/skills/remix-icon into .gemini/skills/remix-icon/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remix-icon", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install einverne/dotfiles remix-icon

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add einverne/dotfiles --skill remix-icon -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/einverne/dotfiles.git skills-src && mkdir -p .github/skills && cp -r skills-src/claude/skills/remix-icon .github/skills/remix-icon && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "remix-icon" agent skill from https://github.com/einverne/dotfiles/tree/master/claude/skills/remix-icon into .github/skills/remix-icon/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remix-icon", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add einverne/dotfiles --skill remix-icon -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install einverne/dotfiles remix-icon --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/einverne/dotfiles.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/claude/skills/remix-icon .opencode/skills/remix-icon && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "remix-icon" agent skill from https://github.com/einverne/dotfiles/tree/master/claude/skills/remix-icon into .opencode/skills/remix-icon/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remix-icon", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: remix-icon
GitHub stars: 121
Token cost: ~2.8k tokens
SKILL.md length: 745 words
Files: 1
Skills in repo: 39
Repo updated: Sep 9, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

Guide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles.

Works in 8 steps: Webfont (HTML/CSS) → Direct SVG → SVG Sprite → …
Adding icons to applications
SKILL.md covers When to Use This Skill, Quick Start, Icon Naming Convention and Usage Patterns, plus 5 more sections
Calls npm, yarn and pnpm; reaches cdn.jsdelivr.net

What it does

Remix Icon is an agent skill from einverne/dotfiles. Guide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles. Use when adding icons to applications, building UI components, or designing interfaces. Supports webfonts, SVG, React, Vue, and direct integration.

Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Icons and illustration. It works with React and Vue.js. The repository describes itself as: my personal dotfiles managed by dotbot, zinit. The licence is GPL-3.0.

When your agent uses it

Adding icons to applications
Building UI components
Designing interfaces

Example prompts

“/remix-icon”

Requirements

Node.js

Workflow steps

8 steps, taken from the step headings in SKILL.md.

Webfont (HTML/CSS)
Direct SVG
SVG Sprite
React Integration
Vue 3 Integration
Browse by Category
Search with Keywords
Consider Icon Variants

What it can do on your machine

Read from SKILL.md and the folder at commit c6c0686. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npm
- yarn
- pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- cdn.jsdelivr.net
Also links to:
- remixicon.com
- github.com
- figma.com
- npmjs.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Remix Icon loads about 2.8k tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 745 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~71
When it runs · the whole SKILL.md, loaded when a task matches: ~2.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from einverne/dotfiles at commit c6c0686, republished under its GPL-3.0 licence (© einverne). 745 words, ~2,763 tokens.

Download SKILL.mdSave it as .claude/skills/remix-icon/SKILL.md (or your agent's skills folder).

name: remix-icon
description: Guide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles. Use when adding icons to applications, building UI components, or designing interfaces. Supports webfonts, SVG, React, Vue, and direct integration.

RemixIcon Implementation Guide

RemixIcon is a comprehensive icon library with 3,100+ meticulously designed icons available in both outlined (-line) and filled (-fill) styles. All icons are built on a 24x24 pixel grid for perfect alignment and consistency.

When to Use This Skill

Use RemixIcon when:

Adding icons to web applications, mobile apps, or design systems
Building UI components that need consistent iconography
Implementing navigation, buttons, status indicators, or media controls
Creating presentations, documents, or design mockups
Need bilingual icon search (English + Chinese)
Require both outlined and filled icon variants

Quick Start

Installation

NPM (recommended for web projects):

bash

npm install remixicon
# or
yarn add remixicon
# or
pnpm install remixicon

CDN (no installation):

html

<link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css"
    rel="stylesheet"
/>

React:

bash

npm install @remixicon/react

Vue 3:

bash

npm install @remixicon/vue

Icon Naming Convention

Pattern: ri-{icon-name}-{style}

Where:

icon-name: Descriptive name in kebab-case (e.g., arrow-right, home, user-add)
style: Either line (outlined) or fill (filled)

Examples:

ri-home-line           # Home icon, outlined
ri-home-fill           # Home icon, filled
ri-arrow-right-line    # Right arrow, outlined
ri-search-line         # Search icon, outlined
ri-heart-fill          # Heart icon, filled

Usage Patterns

1. Webfont (HTML/CSS)

Basic usage:

html

<i class="ri-admin-line"></i>
<i class="ri-home-fill"></i>

With sizing classes:

html

<i class="ri-home-line ri-2x"></i>      <!-- 2em size -->
<i class="ri-search-line ri-lg"></i>    <!-- 1.3333em -->
<i class="ri-heart-fill ri-xl"></i>     <!-- 1.5em -->

Available size classes:

ri-xxs (0.5em)
ri-xs (0.75em)
ri-sm (0.875em)
ri-1x (1em)
ri-lg (1.3333em)
ri-xl (1.5em)
ri-2x through ri-10x (2em - 10em)
ri-fw (fixed width for alignment)

2. Direct SVG

Download and use:

html

<img height="32" width="32" src="path/to/admin-fill.svg" />

Inline SVG:

html

<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="...icon path data..."/>
</svg>

3. SVG Sprite

html

<svg class="remix-icon">
    <use xlink:href="path/to/remixicon.symbol.svg#ri-admin-fill"></use>
</svg>

css

.remix-icon {
    width: 24px;
    height: 24px;
    fill: #333;
}

4. React Integration

jsx

import { RiHeartFill, RiHomeLine, RiSearchLine } from "@remixicon/react";

function MyComponent() {
    return (
        <>
            <RiHeartFill
                size={36}              // Custom size
                color="red"            // Fill color
                className="my-icon"    // Custom class
            />
            <RiHomeLine size={24} />
            <RiSearchLine size="1.5em" color="#666" />
        </>
    );
}

5. Vue 3 Integration

vue

<script setup lang="ts">
import { RiHeartFill, RiHomeLine } from "@remixicon/vue";
</script>

<template>
    <RiHeartFill size="36px" color="red" className="my-icon" />
    <RiHomeLine size="24px" />
</template>

Icon Categories

Icons are organized into 20 semantic categories:

Category	Examples	Use Cases
Arrows	arrow-left, arrow-up, corner-up-left	Navigation, directions, flows
Buildings	home, bank, hospital, store	Locations, facilities
Business	briefcase, archive, pie-chart	Commerce, analytics
Communication	chat, phone, mail, message	Messaging, contact
Design	brush, palette, magic, crop	Creative tools
Development	code, terminal, bug, git-branch	Developer tools
Device	phone, laptop, tablet, printer	Hardware, electronics
Document	file, folder, article, draft	Files, content
Editor	bold, italic, link, list	Text formatting
Finance	money, wallet, bank-card, coin	Payments, transactions
Food	restaurant, cake, cup, knife	Dining, beverages
Health & Medical	health, heart-pulse, capsule	Healthcare, wellness
Logos	github, twitter, facebook	Brand icons
Map	map, pin, compass, navigation	Location, directions
Media	play, pause, volume, camera	Multimedia controls
System	settings, download, delete, add	UI controls, actions
User & Faces	user, account, team, contacts	Profiles, people
Weather	sun, cloud, rain, moon	Climate, forecast
Others	miscellaneous icons	General purpose

Finding Icons

1. Browse by Category

Visit https://remixicon.com and navigate categories to visually browse icons.

2. Search with Keywords

Use English or Chinese keywords. Icons have comprehensive tags for discoverability.

Example searches:

"home" → home, home-2, home-3, home-gear, home-wifi
"arrow" → arrow-left, arrow-right, arrow-up, arrow-down
"user" → user, user-add, user-follow, account-circle

3. Consider Icon Variants

Many icons have numbered variants (home, home-2, home-3) offering stylistic alternatives.

Best Practices

Choosing Styles

Line (Outlined) Style:

Use for: Clean, minimal interfaces
Best with: Light backgrounds, high contrast needs
Examples: Navigation menus, toolbars, forms

Fill (Filled) Style:

Use for: Emphasis, active states, primary actions
Best with: Buttons, selected items, important indicators
Examples: Active nav items, primary CTAs, notifications

Accessibility

Always provide aria-labels for icon-only elements:

html

<button aria-label="Search">
    <i class="ri-search-line"></i>
</button>

For decorative icons, use aria-hidden:

html

<span aria-hidden="true">
    <i class="ri-star-fill"></i>
</span>

Show full SKILL.md (299 more words)Show less

Performance

For web applications:

Use webfonts (WOFF2: 179KB) for multiple icons
Use individual SVGs for 1-5 icons only
Use SVG sprites for 5-20 icons
Prefer CDN for faster global delivery

Font formats by size (smallest to largest):

WOFF2: 179KB (recommended)
WOFF: 245KB
TTF: 579KB
EOT: 579KB (legacy IE support)

Color and Sizing

Use currentColor for flexibility:

css

.icon {
    color: #333;  /* Icon inherits this color */
}

Maintain 24x24 grid alignment:

css

/* Good - maintains grid */
.icon { font-size: 24px; }
.icon { font-size: 48px; }  /* 24 * 2 */

/* Avoid - breaks grid alignment */
.icon { font-size: 20px; }
.icon { font-size: 30px; }

Framework Integration

Next.js:

jsx

import '@/styles/remixicon.css';  // In _app.js or layout
import { RiHomeLine } from "@remixicon/react";

Tailwind CSS:

html

<i class="ri-home-line text-2xl text-blue-500"></i>

CSS Modules:

jsx

import styles from './component.module.css';
import 'remixicon/fonts/remixicon.css';

<i className={`ri-home-line ${styles.icon}`}></i>

Advanced Usage

Custom Icon Sizing with CSS

css

.custom-icon {
    font-size: 32px;
    line-height: 1;
    vertical-align: middle;
}

/* Responsive sizing */
@media (max-width: 768px) {
    .custom-icon {
        font-size: 24px;
    }
}

Icon Animations

css

.spinning-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

Dynamic Icons in React

jsx

function IconButton({ iconName, filled = false }) {
    const iconClass = `ri-${iconName}-${filled ? 'fill' : 'line'}`;
    return <i className={iconClass} />;
}

// Usage
<IconButton iconName="home" />
<IconButton iconName="heart" filled />

Design Tool Integration

Figma Plugin

Install the official RemixIcon plugin for Figma:

Plugin: RemixIcon
URL: https://www.figma.com/community/plugin/1089569154784319246/remixicon
Feature: Direct icon access within Figma workspace

Copy to Design Tools

Icons can be directly copied from https://remixicon.com to:

Sketch
Figma (without plugin)
Adobe XD
Adobe Illustrator

PowerPoint & Keynote

Use RemixIcon-Slides for direct integration:

Repository: https://github.com/Remix-Design/RemixIcon-Slides
Feature: Edit icon styles directly in presentations

Common Patterns

html

<nav>
    <a href="/home">
        <i class="ri-home-line"></i>
        <span>Home</span>
    </a>
    <a href="/search">
        <i class="ri-search-line"></i>
        <span>Search</span>
    </a>
    <a href="/profile">
        <i class="ri-user-line"></i>
        <span>Profile</span>
    </a>
</nav>

Button with Icon

html

<button class="btn-primary">
    <i class="ri-download-line"></i>
    Download
</button>

Status Indicators

jsx

// React example
function StatusIcon({ status }) {
    const icons = {
        success: <RiCheckboxCircleFill color="green" />,
        error: <RiErrorWarningFill color="red" />,
        warning: <RiAlertFill color="orange" />,
        info: <RiInformationFill color="blue" />
    };
    return icons[status];
}

Input with Icon

html

<div class="input-group">
    <i class="ri-search-line"></i>
    <input type="text" placeholder="Search..." />
</div>

Troubleshooting

Icons not displaying

Check:

CSS file is loaded: <link href="remixicon.css" rel="stylesheet" />
Class name syntax: ri-{name}-{style} (e.g., ri-home-line)
Font files are accessible (check browser Network tab)
No font-family override conflicting with .ri-* classes

Wrong icon size

Solutions:

Use size classes: ri-lg, ri-2x, etc.
Set parent font-size property
Ensure line-height: 1 for proper alignment
Use vertical-align: middle if needed

Icons look blurry

Causes:

Non-integer font sizes breaking pixel grid
Browser zoom levels
Transform properties causing subpixel rendering

Fix: Use multiples of 24px (24, 48, 72, 96) for crisp rendering

Resources

Website: https://remixicon.com
GitHub: https://github.com/Remix-Design/RemixIcon
NPM: https://www.npmjs.com/package/remixicon
React Package: @remixicon/react
Vue Package: @remixicon/vue
License: Apache 2.0 (free for personal and commercial use)
Total Icons: 3,100+
Current Version: 4.7.0

Support

Issues: https://github.com/Remix-Design/RemixIcon/issues
Email: jimmy@remixdesign.cn
Twitter/X: @RemixDesignHQ

Version History

v4.7.0 (Latest): 3,100+ icons with React and Vue packages
Full changelog available on GitHub releases

Files

Just SKILL.md in claude/skills/remix-icon of einverne/dotfiles.

Open the folder on GitHubat commit c6c0686

Compare with similar skills

Remix Icon next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Remix Icon compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Remix Icon this skilleinverne/dotfiles	121	—	~2.8k	Automated safety check: Pass	GPL-3.0	1 mo ago
Kill AI Slopyetone/kill-ai-slop	1.3k	—	~1.4k	Automated safety check: Pass	Apache-2.0	25 days ago
Solar Iconssaoudi-h/solar-icons	190	—	~2.1k	Automated safety check: Pass	MIT	yesterday
GSAP Core Animationgreensock/gsap-skills	16k	3 repos	~3.7k	Automated safety check: Pass	MIT	2 mo ago
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar	5.7k	1 repos	~1.1k	Automated safety check: Pass	MIT	17 days ago
Design StyleCastor6/tactus	376	1 repos	~2.1k	Automated safety check: Pass	Apache-2.0	5 mo ago

Similar skills

Kill AI Slop
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
1.3k GitHub stars~1.4k tokensUpdated 25 days ago
Frontend & DesignAuto-check passed
Solar Icons
saoudi-h/solar-icons
Add Solar Icons via @solar-icons/cli to any React, Vue, Svelte, Solid, Angular, React Native, Nuxt, Static, vanilla JS, or Laravel Blade project.
190 GitHub stars~2.1k tokensUpdated yesterday
Frontend & DesignAuto-check passed
GSAP Core Animation
greensock/gsap-skills
Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.
16k GitHub starsUsed in 3 repos~3.7k tokens
Frontend & DesignAuto-check passed
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
5.7k GitHub starsUsed in 1 repo~1.1k tokens
Frontend & DesignAuto-check passed
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
376 GitHub starsUsed in 1 repo~2.1k tokens
Frontend & DesignAuto-check passed
Uithing
BayBreezy/ui-thing
Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.
729 GitHub stars~1.3k tokensUpdated yesterday
Frontend & DesignAuto-check passed

Questions about Remix Icon

What does Remix Icon do?

Guide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles. Remix Icon is an agent skill from einverne/dotfiles. Guide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles.

When should I use Remix Icon?

Remix Icon fits situations like: adding icons to applications; building UI components; designing interfaces.

How do I install Remix Icon in Claude Code?

Run `npx skills add einverne/dotfiles --skill remix-icon -a claude-code`. Or copy the skill folder (claude/skills/remix-icon in einverne/dotfiles) into .claude/skills/remix-icon in your project. Claude Code loads it when a task matches its description.

How do I install Remix Icon in Codex?

Run `npx skills add einverne/dotfiles --skill remix-icon -a codex`. Or copy the skill folder (claude/skills/remix-icon in einverne/dotfiles) into .agents/skills/remix-icon in your project. Codex loads it when a task matches its description.

Can I use Remix Icon in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add einverne/dotfiles --skill remix-icon -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/remix-icon, .gemini/skills/remix-icon, .github/skills/remix-icon and .opencode/skills/remix-icon in your project.

What does Remix Icon need to run?

Going by SKILL.md and its folder, Remix Icon needs the command-line tools its instructions call (npm, yarn and pnpm). Our summary lists: Node.js.

Does Remix Icon access the network?

SKILL.md names 5 domains. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. As links in the text: remixicon.com, github.com, figma.com and npmjs.com. This is read from the text; nothing was executed.

Is Remix Icon safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Remix Icon use?

Remix Icon is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Remix Icon use?

About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Remix Icon?

Skills that share tags, products or a category with Remix Icon: Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), Solar Icons (saoudi-h/solar-icons, 190 stars), GSAP Core Animation (greensock/gsap-skills, 16k stars) and UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Remix Icon?

einverne (a GitHub user) maintains it in einverne/dotfiles, which has 121 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on September 9, 2026.

Source: einverne/dotfiles on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Remix Icon

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

RemixIcon Implementation Guide

When to Use This Skill

Quick Start

Installation

Icon Naming Convention

Usage Patterns

1. Webfont (HTML/CSS)

2. Direct SVG

3. SVG Sprite

4. React Integration

5. Vue 3 Integration

Icon Categories

Finding Icons

1. Browse by Category

2. Search with Keywords

3. Consider Icon Variants

Best Practices

Choosing Styles

Accessibility

Performance

Color and Sizing

Framework Integration

Advanced Usage

Custom Icon Sizing with CSS

Icon Animations

Dynamic Icons in React

Design Tool Integration

Figma Plugin

Copy to Design Tools

PowerPoint & Keynote

Common Patterns

Navigation Menu

Button with Icon

Status Indicators

Input with Icon

Troubleshooting

Icons not displaying

Wrong icon size

Icons look blurry

Resources

Support

Version History

Files

Compare with similar skills

Similar skills

More from einverne/dotfiles

Related

Questions about Remix Icon