skills.rest
dungle-scrubs
dungle-scrubsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

icons

Standardize UI icon selection with Lucide, Hero Icons, and Tabler priorities.

Updated Aug 27, 2026
Search Tags:#consistency#UI#SVG#icon#Lucide#Hero Icons
One-click install
npx skills add https://github.com/dungle-scrubs/agent-config --skill icons-dungle-scrubs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icons
Source: https://github.com/dungle-scrubs/agent-config/tree/main/stow/shared/skills/icons
Command: npx skills add https://github.com/dungle-scrubs/agent-config --skill icons-dungle-scrubs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes icon usage across UI projects, ensuring consistent visuals by prioritizing libraries and avoiding custom SVGs unless explicitly requested.

Core Features & Use Cases

  • Library priority: Lucide first, then Hero Icons, then Tabler for brands, to maintain visual consistency.
  • Guidance for usage: Clear rules for when to avoid custom SVGs, how to handle sizes and accessibility, and examples across React, Vue, and plain HTML.
  • Use Case: Apply this standard when designing a new dashboard or app that requires cohesive iconography across buttons, navigation, and branding assets.

Quick Start

Follow the icons standard to select icons from Lucide, Hero Icons, or Tabler for your next UI component set.

Frequently Asked Questions about icons

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

FAQPage Schema
How do I maintain icon consistency across a UI design system?▼

To maintain icon consistency, prioritize Lucide first, fallback to Hero Icons, and use Tabler for brands. This approach standardizes visual styles across UI components and front-end codebases while discouraging custom SVGs.

What is the best way to choose between Lucide, Hero Icons, and Tabler for a project?▼

The best way to choose is by following a library priority rule: select Lucide first, then Hero Icons, then Tabler specifically for brand assets. This hierarchy ensures cohesive iconography across buttons and navigation elements.

Can I use custom SVGs in my front-end codebase with this icon standard?▼

Custom SVGs are discouraged under this icon standard unless explicitly requested. Prioritizing established libraries like Lucide and Hero Icons prevents visual inconsistencies and ensures proper accessibility considerations across your UI projects.

How do I handle icon accessibility and sizing in React or Vue components?▼

Standardize icon accessibility and sizing by applying library-first rules from Lucide or Hero Icons within your React, Vue, or plain HTML projects. These libraries provide consistent properties for managing visual output and screen reader support.

When should I use Tabler icons instead of Lucide in a dashboard design?▼

Use Tabler icons instead of Lucide specifically for branding assets within your dashboard design. Lucide remains the primary choice for general UI components to maintain strict visual consistency across the application interface.

Related Skills

Explore More Design & Creative Skills→
wukangcheng2944wukangcheng2944

icon-finder

Search six Iconify libraries and deliver icons as SVG or components.

Community
Intermediate
dylantarredylantarre
38

icon-system

Standardize icon delivery with SVG sprites and inline components.

Community
Basic
Adelie-SquadAdelie-Squad
17

creative-frontend

Develop reusable UI components with design-system tokens across React, Vue, and Angular.

Official
Advanced
douincdouinc
1

figma-icons-iconify

Fetch SVG icons from Iconify and insert them into Figma designs.

Official
Intermediate