icons_skill

This skill helps you implement accessible SVG icons with proper sizing, color inheritance, and performance optimizations across UI.

Python

2.5k

GitHub Stars

2

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill openclaw/skills --skill icons

_meta.json267 B
SKILL.md3.9 KB

Overview

This skill implements accessible, performant SVG icons with correct sizing, color inheritance, and ARIA patterns. It standardizes icon usage across UI components, enforces touch targets, and reduces bundle bloat through sprite and tree-shaking strategies. The goal is consistent, themeable icons that work well for screen readers and across browsers.

How this skill works

The skill converts and normalizes icon sources to SVG-first assets, removes hardcoded fills, and applies fill/stroke="currentColor" for CSS-driven theming. It provides patterns for decorative vs informative icons (aria-hidden, role, title), enforces size and stroke mappings for common grids, and offers options for inline SVGs, symbol sprites, or optimized img data URIs depending on performance needs.

When to use it

Replacing icon fonts with SVG for modern accessibility and multicolor icons
Adding accessible names to icon-only buttons or decorative icons next to text
Ensuring touch targets meet 44×44px minimum on mobile
Scaling icons with text using em-based sizing
Optimizing large icon sets via tree-shaking or sprites

Best practices

Prefer SVGs and remove hardcoded fill attributes; use fill="currentColor" or stroke="currentColor"
Mark decorative icons aria-hidden="true" and set focusable="false" to avoid keyboard traps
Match stroke weight to icon size (16→1px, 20→1.25px, 24→1.5px, 32→2px) for visual balance
Use em-based sizing (width/height: 1em) so icons scale with text
Inline critical icons, lazy-load or sprite non-critical assets to minimize render cost
Keep a single coherent icon style and name icons by appearance, not by business meaning

Example use cases

A save button with decorative icon: inline SVG aria-hidden and visible label
An icon-only toolbar button: SVG with role="img" and a <title> or aria-label for screen readers
Mobile action buttons: 24px icon inside 44×44 touchable area via padding
Site theming: icons inherit color from CSS to follow light/dark modes
Large dashboards: tree-shake icon library to include only used icons for smaller bundles

FAQ

Only for legacy IE11 environments where SVG support or polyfills are unavailable; otherwise prefer SVG for accessibility and performance.

How do I make icons change color on hover?

Use fill="currentColor" or stroke="currentColor" in the SVG and change the CSS color property on the parent element or state selector.

Are symbol sprites faster than inline SVG?

Sprites reduce DOM repetition but can be slower than optimized inline SVG or data URI images in some benchmarks; inline critical icons and lazy-load sprites for less-critical icons.