skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

solar-duotone-bold

Applies the Iconify Solar Duotone Bold icon family to UI components.

5.7k|685|Updated Feb 3, 2026
Search Tags:#HTML#icons#Iconify#UI Design#Web design#icon style#solar duotone
One-click install
npx skills add https://github.com/MengTo/Skills --skill solar-duotone-bold
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: solar-duotone-bold
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/solar-duotone-bold
Command: npx skills add https://github.com/MengTo/Skills --skill solar-duotone-bold

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent or mismatched icon styles make interfaces look unpolished. This Skill standardizes icon usage by directing the agent to use the Iconify Solar Duotone Bold family with consistent sizing, color treatment, and labeling across a UI.

Core Features & Use Cases

  • Unified icon family: Uses Iconify Solar Duotone Bold as the default icon set for navigation, controls, and feature cards.
  • Consistency rules: Enforces consistent icon sizes within component groups and intentional duotone opacity so secondary fills support the main glyph.
  • Guardrails: Prevents mixing Solar Duotone Bold with unrelated outline icon families and requires labels for unfamiliar actions.
  • Use Case: When building a landing page or dashboard, apply this Skill so every icon in the header, feature grid, and CTA sections shares one cohesive duotone style.

Quick Start

Use the solar-duotone-bold skill to style all icons in my landing page with the Iconify Solar Duotone Bold family.

Frequently Asked Questions about solar-duotone-bold

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Solar Duotone Bold icons in HTML?▼

Use the iconify-icon web component with icon names prefixed by solar:, such as solar:star-bold. Load the Iconify script, then place iconify-icon elements with width and height attributes wherever icons are needed.

What is the Solar Duotone Bold icon style?▼

Solar Duotone Bold is an Iconify icon family where each glyph combines a solid bold shape with a lower-opacity secondary fill. It gives icons more visual depth than plain outline sets while staying cohesive across a UI.

Can I mix Solar Duotone Bold with other icon families?▼

No, mixing Solar Duotone Bold with unrelated outline icon families in the same control set breaks visual cohesion. Keep one icon family per component group and match stroke, fill, and color treatment to the surrounding surface contrast.

When should icons have text labels?▼

Pair icons with clear labels for navigation, controls, and feature cards, and never rely on icons alone for unfamiliar actions. Labels remove ambiguity for actions users cannot recognize from the glyph alone.

What are the limitations of duotone icons?▼

Duotone icons require intentional opacity handling so the secondary fill supports rather than obscures the main glyph. They can also clash with surfaces of similar contrast, so color treatment must be matched to the background.

Related Skills

Explore More Design & Creative Skills→
HDeiblerHDeibler
6

color

Structure UI color palettes around attention, grouping, meaning, and aesthetics.

Community
Intermediate
yuyanghu06yuyanghu06

cuyamaca-settings-polish

Polish Cuyamaca Settings UI with accessibility and responsive refinements.

Community
Intermediate
emiltsokovemiltsokov

refactoring-ui

Apply fixed scales for spacing, typography, color, and shadows to standardize UI designs.

Community
Advanced
woweyawoweya
1

symfony-ux-icons

Render scalable SVG icons in Symfony Twig templates via Iconify and local assets.

Community
Intermediate