icon-usage

Official

Standardize icon usage with design tokens.

AuthorTechsioCZ
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Icons are often implemented inconsistently across apps, causing visual drift and accessibility gaps. This Skill guides how to use token-based icons and Iconify icons within the @techsio/ui-kit to maintain consistent, scalable, and accessible iconography.

Core Features & Use Cases

  • Prefer token icons for UI semantics to ensure consistency across components and themes.
  • Use Iconify icons only when no token icon exists for the desired state, while keeping proper size and color mappings.
  • Ensure icons are decorative when appropriate and always provide accessible text for assistive technologies.

Quick Start

Import the Icon component from @techsio/ui-kit and render a token icon with the appropriate size and color.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: icon-usage
Download link: https://github.com/TechsioCZ/new-engine/archive/main.zip#icon-usage

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.