Guide · Agent skill
How to use the Solar Duotone Bold Icons agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The solar-duotone-bold skill is a set of instructions that tells an AI agent to use the Iconify Solar Duotone Bold icon family as the default icon set when it builds an interface. This guide is for front-end developers, designers and teams who want a consistent icon look. By the end you will know what the skill changes, how to install it, how to ask for it in plain language, and where it does not fit.
Solar Duotone Bold IconsMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the solar-duotone-bold ZIP from the agent-skills/web-design/solar-duotone-bold page.
- 2Unzip the folder. Extract it so the solar-duotone-bold folder is inside ~/.claude/skills/ or your project's .claude/skills/.
- 3Or upload in Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 4Load the Iconify set. Make sure your page can load the Iconify Solar Duotone Bold icon set so the icons render.
- 5Ask in plain language. Describe the interface and mention icons or Solar Duotone Bold in your request.
- 6Review the output. Check icon sizes, labels and secondary fill against the demo reference.
What an agent skill is and what this one does
An agent skill is a folder containing a SKILL.md file. The file holds instructions that an AI agent reads when a task matches the skill's description. This skill's description is: Use Iconify Solar Duotone Bold icon style.
When the skill applies, the agent uses Solar Duotone Bold as its default icon family. Duotone icons have a main shape plus a lighter secondary fill, so they look richer than plain outline icons. The skill also sets simple rules: keep icon sizes consistent within a component group, pair icons with clear labels for navigation, controls and feature cards, and use the secondary fill on purpose so it supports the main shape.
Install the skill from the ZIP
Download the ZIP for agent-skills/web-design/solar-duotone-bold from the MengTo/Skills repository page on our site. Unzip it so the solar-duotone-bold folder sits in one of these locations:
- Personal skills: ~/.claude/skills/
- Project skills: the .claude/skills/ folder inside your project
- Claude apps: upload the skill under Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. Describe the interface you want and mention icons or the Solar style. The SKILL.md example prompts reference the skill by name, so you can also write $solar-duotone-bold at the start of a request, as the demo prompts do.
- Build a responsive pricing page with feature cards and icons using Solar Duotone Bold.
- Add a sidebar navigation with labelled icons that match the rest of the app.
- Recreate the included demo as a standalone HTML page.
Use $solar-duotone-bold to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.Use the included demo files
The download includes a demo folder with index.html, PROMPT.md, and source.json. demo/index.html is a visual and interaction reference. demo/PROMPT.md contains the full prompt used to recreate it, which asks for a complete responsive HTML document. Give the agent the demo as a reference rather than a loose mood board, and compare its output against the demo.
What you need before it works
The skill tells the agent which icons to use, but the icons only render if the Iconify icon library with the Solar Duotone Bold set is available in the project. Check that your page loads it before judging the output.
- Iconify icon library with the Solar Duotone Bold set
- No scripts are run by this skill
- No network use by the skill itself
Safety notes and limits
The skill runs no scripts and uses no network access, according to our review. Its guardrails tell the agent not to mix Solar Duotone Bold with unrelated outline icon families in the same control set, and not to rely on icons alone for unfamiliar actions.
Do not use this skill where a required brand icon set or design system must be kept, because the skill would override it with Solar icons. Avoid icon-only controls where users need clear labels.
What people use it for
- Building a responsive landing page with feature cards that each have a matching icon.
- Prototyping a dashboard sidebar where every navigation item has a labelled icon.
- Recreating the included demo page as a standalone HTML file for a design review.
- Keeping icon style consistent across components in a team that already uses Iconify.
Frequently asked questions
Is the solar-duotone-bold skill free?
The skill is released under the MIT licence, as listed on its page. The icon set itself comes from Iconify, so check that library's own terms if you rely on it in a product.
How do I install the solar-duotone-bold skill?
Download the ZIP from the skill's page and unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ inside a project. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Do I need to install anything else for the icons to show?
Yes. The skill requires the Iconify icon library with the Solar Duotone Bold set to render the icons. Without it, the icons will not display.
Does this skill run scripts or use the internet?
According to our review, it runs no scripts and uses no network access.
Can I use it with a brand icon set or design system?
Not well. The skill would override a required brand icon set with Solar icons, so pick a different approach for projects that must keep their own icons.
How is this different from using plain outline icons?
Duotone icons have a main shape plus a lighter secondary fill, so they look richer than generic outline icons. The skill also adds rules on sizing, labels and avoiding mixed icon styles.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer who wants an agent to build interfaces with a cohesive, richer icon style from Iconify. Pick something else if your project needs a required brand icon set or design system, or if your interface depends on icon-only controls with no labels.
Download the skill