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.
Add or modify icon keyword mappings for providers, models, or agents in lobe-icons.
Install Add Icon Mapping
The automated check flagged lines worth reading first. See the safety section below.
$ npx skills add lobehub/lobe-icons --skill add-icon-mapping -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lobehub/lobe-icons add-icon-mapping --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/lobehub/lobe-icons.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/add-icon-mapping .claude/skills/add-icon-mapping && rm -rf skills-srcUse ~/.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/
Install the "add-icon-mapping" agent skill from https://github.com/lobehub/lobe-icons/tree/master/.agents/skills/add-icon-mapping into .claude/skills/add-icon-mapping/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-icon-mapping", 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 install https://github.com/lobehub/lobe-icons/tree/master/.agents/skills/add-icon-mappingType 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.
$ npx skills add lobehub/lobe-icons --skill add-icon-mapping -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lobehub/lobe-icons add-icon-mapping --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobe-icons.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/add-icon-mapping .agents/skills/add-icon-mapping && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "add-icon-mapping" agent skill from https://github.com/lobehub/lobe-icons/tree/master/.agents/skills/add-icon-mapping into .agents/skills/add-icon-mapping/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-icon-mapping", 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.
$ npx skills add lobehub/lobe-icons --skill add-icon-mapping -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lobehub/lobe-icons add-icon-mapping --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobe-icons.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/add-icon-mapping .cursor/skills/add-icon-mapping && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "add-icon-mapping" agent skill from https://github.com/lobehub/lobe-icons/tree/master/.agents/skills/add-icon-mapping into .cursor/skills/add-icon-mapping/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-icon-mapping", 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 https://github.com/lobehub/lobe-icons.git --path .agents/skills/add-icon-mapping--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add lobehub/lobe-icons --skill add-icon-mapping -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lobehub/lobe-icons add-icon-mapping --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobe-icons.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/add-icon-mapping .gemini/skills/add-icon-mapping && rm -rf skills-srcUse ~/.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/
Install the "add-icon-mapping" agent skill from https://github.com/lobehub/lobe-icons/tree/master/.agents/skills/add-icon-mapping into .gemini/skills/add-icon-mapping/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-icon-mapping", 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.
$ gh skill install lobehub/lobe-icons add-icon-mappingInstalls 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).
$ npx skills add lobehub/lobe-icons --skill add-icon-mapping -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/lobehub/lobe-icons.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/add-icon-mapping .github/skills/add-icon-mapping && rm -rf skills-srcUse ~/.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/
Install the "add-icon-mapping" agent skill from https://github.com/lobehub/lobe-icons/tree/master/.agents/skills/add-icon-mapping into .github/skills/add-icon-mapping/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-icon-mapping", 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.
$ npx skills add lobehub/lobe-icons --skill add-icon-mapping -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lobehub/lobe-icons add-icon-mapping --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobe-icons.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/add-icon-mapping .opencode/skills/add-icon-mapping && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "add-icon-mapping" agent skill from https://github.com/lobehub/lobe-icons/tree/master/.agents/skills/add-icon-mapping into .opencode/skills/add-icon-mapping/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-icon-mapping", 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
add-icon-mapping- GitHub stars
- 2.6k
- Token cost
- ~1.5k tokens
- SKILL.md length
- 588 words
- Files
- 1
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Add or modify icon keyword mappings for providers, models, or agents in lobe-icons.
- Works in 4 steps: Enum — add to ModelProvider in… → Import — in providerConfig.tsx, import… → Mapping entry — add to providerMappings,… → …
- Even if the request only says add icon for X provider
- SKILL.md covers Where mappings live (edit ALL…, Matching semantics (they…, Provider mapping workflow and Verification, plus 1 more section
- Calls bun, pnpm and git
What it does
Add Icon Mapping is an agent skill from lobehub/lobe-icons. Add or modify icon keyword mappings for providers, models, or agents in lobe-icons. Use this whenever a task involves mapping a provider/model id to an icon, adding a new entry to ModelProvider enum or providerMappings/modelMappings/agentMappings, or fixing a provider/model that renders the fallback (default) icon in LobeHub. Trigger even if the request only says "add icon for X provider" or references a Linear issue about icon keyword mapping — the actual icon component usually already exists; only the mapping…
Its SKILL.md is about 1.5k 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 Mobile, covering Icons and illustration and Logo and visual identity. It works with Linear, React and React Native. The repository describes itself as: 🥨 Lobe Icons - Brings AI/LLM brand logos to your React & React Native apps — static SVG/PNG/WebP, no dependencies. The licence is MIT.
When your agent uses it
- Even if the request only says add icon for X provider
- References a Linear issue about icon keyword mapping — the actual icon component usually already exists
- Only the mapping is missing
Example prompts
- “add icon for X provider”
- “/add-icon-mapping”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Enum — add to ModelProvider in providerEnum.ts, alphabetically sorted, value lowercase
- Import — in providerConfig.tsx, import the icon (alphabetical order). Main package uses the @/ alias, RN uses relative paths
- Mapping entry — add to providerMappings, near related entries
- Repeat 1–3 in the react-native package. The RN enum is RNModelProvider inside its own providerEnum.ts; entry shape is identical.
What it can do on your machine
Read from SKILL.md and the folder at commit c385b2b. 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:
bunpnpmgit
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm and git, which can reach the network depending on how they are called.
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
Add Icon Mapping loads about 1.5k tokens when it runs. Until then it costs about 136 tokens; SKILL.md has 588 words of instructions outside code blocks.
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: warnings
The automated check found patterns that need a careful read before installing.
- WarningMentions a credentials file (SSH keys, cloud or package-manager tokens)SKILL.md:78
- `.npmrc` sets `lockfile=false` — the repo commits **no lockfile**. Running `pnpm install` generates `pnpm-lock.yaml` a
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 lobehub/lobe-icons at commit c385b2b, republished under its MIT licence (© lobehub). 588 words, ~1,503 tokens.
Download SKILL.mdSave it as
.claude/skills/add-icon-mapping/SKILL.md (or your agent's skills folder).- name
- add-icon-mapping
- description
- Add or modify icon keyword mappings for providers, models, or agents in lobe-icons. Use this whenever a task involves mapping a provider/model id to an icon, adding a new entry to ModelProvider enum or providerMappings/modelMappings/agentMappings, or fixing a provider/model that renders the fallback (default) icon in LobeHub. Trigger even if the request only says "add icon for X provider" or references a Linear issue about icon keyword mapping — the actual icon component usually already exists; only the mapping is missing.
Add icon keyword mapping
lobe-icons ships icon components (e.g. src/Grok/) and, separately, mapping tables that resolve a provider/model/agent id string to one of those components. A provider showing the fallback icon in LobeHub almost always means the mapping entry is missing, not the icon itself. Always check src/<Name>/ first — if the brand icon already exists, the task is only wiring it up.
Where mappings live (edit ALL that apply)
The react-native package duplicates the main package's config files. Forgetting the RN package is the most common mistake — the main package edits compile and pass review on their own.
| What | Main package | react-native package |
|---|---|---|
| Provider enum | src/features/providerEnum.ts | packages/react-native/src/features/providerEnum.ts |
| Provider mappings | src/features/providerConfig.tsx | packages/react-native/src/features/providerConfig.tsx |
| Model mappings | src/features/modelConfig.ts | packages/react-native/src/features/modelConfig.ts |
| Agent mappings | src/features/agentConfig.ts | — (main package only) |
The static-* workspace packages (static-svg, static-png, static-webp, static-avatar) are generated from icon components and contain no mapping logic — never edit them for a mapping change.
Matching semantics (they differ!)
- ProviderIcon: exact match —
keyword.toLowerCase() === provider. A keyword likexaiwill NOT matchsupergrok; every provider id needs its own keyword. - ModelIcon / AgentIcon: each keyword is a case-insensitive RegExp tested against the model id, and the first matching entry in the array wins. Consequences:
- Substrings match: keyword
gpt-4matcheschatgpt-4o-latest. - Order matters: put more specific entries before general ones (see how
gpt-osssits before the broad OpenAI entry). - Regex syntax is live:
^o1,/o1,o1-are anchored patterns, and characters like.or+in a keyword are regex metacharacters — escape or anchor deliberately.
- Substrings match: keyword
Provider mapping workflow
- Enum — add to
ModelProviderinproviderEnum.ts, alphabetically sorted, value lowercase:ts SuperGrok = 'supergrok', - Import — in
providerConfig.tsx, import the icon (alphabetical order). Main package uses the@/alias, RN uses relative paths:ts import Grok from '@/Grok'; // main package import Grok from '../icons/Grok'; // react-native package - Mapping entry — add to
providerMappings, near related entries:ts { Icon: Grok, keywords: [ModelProvider.SuperGrok] }, - Repeat 1–3 in the react-native package. The RN enum is
RNModelProviderinside its ownproviderEnum.ts; entry shape is identical.
Show full SKILL.md (286 more words)Show less
New entry vs appending a keyword
Two established patterns for derived/subscription providers:
- Append to an existing entry when the new provider should look identical to its parent — precedent:
keywords: [ModelProvider.Moonshot, ModelProvider.KimiCodingPlan],[ModelProvider.ZhiPu, ModelProvider.GLMCodingPlan]. - New entry with a different brand icon when a more recognizable brand exists and visual distinction from the parent provider helps — precedent:
supergrok→Grokicon instead of appending to theXAIentry.
Prefer whichever the issue/requester specifies; otherwise pick based on whether users would benefit from telling the two providers apart in a list.
Verification
bun run type-check # repo root
cd packages/react-native && bun run type-check # RN package has its own tsconfigIf dependencies aren't installed, the RN type-check reports pre-existing Cannot find module 'react-native' / 'react-native-svg' errors — those are environmental, not caused by your change. Only errors mentioning your new enum member or the config files matter; don't install dependencies just to silence them (pnpm install creates lockfile noise, see below).
Type-check catches typos but not a missed mapping — grep is the completeness check:
grep -rn "supergrok" src packages/react-native/srcExpect hits in both enum files and both config files (2×2). For a model/agent keyword, quickly sanity-check the regex in isolation: new RegExp(keyword, 'i').test(modelId).
There are no committed tests and the repo's vitest.config.ts alias ('@': './src', relative) does not resolve transitive @/ imports — a render test needs a throwaway config with an absolute-path alias and server.deps.inline: [/@lobehub/]. Usually type-check + grep is sufficient.
Commit pitfalls
.npmrcsetslockfile=false— the repo commits no lockfile. Runningpnpm installgeneratespnpm-lock.yamland may inject a placeholderallowBuilds:block intopnpm-workspace.yaml. Delete the lockfile andgit checkout -- pnpm-workspace.yamlbefore committing.- The pre-commit hook runs lint-staged and can sweep unintended files into the commit. After committing, check
git show --stat HEAD— a mapping change should touch only the 2–4 config files. - Commit style is gitmoji + conventional:
✨ feat: add Grok icon mapping for supergrok provider.
© lobehub, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/add-icon-mapping of lobehub/lobe-icons.
Open the folder on GitHubat commit c385b2b
Compare with similar skills
Add Icon Mapping 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Add Icon Mapping this skilllobehub/lobe-icons | 2.6k | — | ~1.5k | Automated safety check: Warn | MIT | |
| Solar Iconssaoudi-h/solar-icons | 186 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Add Featureecency/vision-mobile | 262 | — | ~1.9k | Automated safety check: Pass | MIT | |
| ThemingCode-with-Beto/skills | 140 | — | ~2.5k | Automated safety check: Pass | None | |
| Frontend Optimistic Mutationssickn33/agentic-awesome-skills | 47k | 1 repos | ~3.6k | Automated safety check: Pass | MIT | |
| Frontend Architecturesickn33/agentic-awesome-skills | 47k | 1 repos | ~5.6k | Automated safety check: Pass | MIT |
Similar skills
Add Feature
ecency/vision-mobile
A skill your agent uses when adding a new screen, route, or user-facing feature to the Ecency mobile React Native app, covering navigator registration, route params, i18n strings and styling.
Theming
Code-with-Beto/skills
Scaffold a unified, cross-platform color theme system into an Expo Router app.
Frontend Optimistic Mutations
sickn33/agentic-awesome-skills
A portable, framework-agnostic discipline for the write path of any React or React Native app using a query/cache layer.
Frontend Architecture
sickn33/agentic-awesome-skills
A portable, framework-agnostic architecture style for any React or React Native frontend.
Frontend UI Standards
MaxHan7/frontend-ui-standards-skill
A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.
Related
Works with
Categories
Questions about Add Icon Mapping
What does Add Icon Mapping do?
Add or modify icon keyword mappings for providers, models, or agents in lobe-icons. Add Icon Mapping is an agent skill from lobehub/lobe-icons. Add or modify icon keyword mappings for providers, models, or agents in lobe-icons.
When should I use Add Icon Mapping?
Add Icon Mapping fits situations like: even if the request only says add icon for X provider; references a Linear issue about icon keyword mapping — the actual icon component usually already exists; only the mapping is missing.
How do I install Add Icon Mapping in Claude Code?
Run `npx skills add lobehub/lobe-icons --skill add-icon-mapping -a claude-code`. Or copy the skill folder (.agents/skills/add-icon-mapping in lobehub/lobe-icons) into .claude/skills/add-icon-mapping in your project. Claude Code loads it when a task matches its description.
How do I install Add Icon Mapping in Codex?
Run `npx skills add lobehub/lobe-icons --skill add-icon-mapping -a codex`. Or copy the skill folder (.agents/skills/add-icon-mapping in lobehub/lobe-icons) into .agents/skills/add-icon-mapping in your project. Codex loads it when a task matches its description.
Can I use Add Icon Mapping 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 lobehub/lobe-icons --skill add-icon-mapping -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-icon-mapping, .gemini/skills/add-icon-mapping, .github/skills/add-icon-mapping and .opencode/skills/add-icon-mapping in your project.
What does Add Icon Mapping need to run?
Going by SKILL.md and its folder, Add Icon Mapping needs the command-line tools its instructions call (bun, pnpm and git).
Does Add Icon Mapping access the network?
SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Add Icon Mapping safe to install?
Our automated static check of SKILL.md flagged 1 warning(s): mentions a credentials file (ssh keys, cloud or package-manager tokens). Read the flagged lines before installing; the check is not a guarantee either way.
What licence does Add Icon Mapping use?
Add Icon Mapping is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Add Icon Mapping use?
About 1.5k tokens (SKILL.md is roughly 6k 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 Add Icon Mapping?
Skills that share tags, products or a category with Add Icon Mapping: Solar Icons (saoudi-h/solar-icons, 186 stars), Add Feature (ecency/vision-mobile, 262 stars), Theming (Code-with-Beto/skills, 140 stars) and Frontend Optimistic Mutations (sickn33/agentic-awesome-skills, 47k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Add Icon Mapping?
lobehub (a GitHub organization) maintains it in lobehub/lobe-icons, which has 2,586 GitHub stars. The repository was last updated on October 7, 2026.
Source: lobehub/lobe-icons on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.