A technical framework for implementing accessible, performant, and scalable SVG icons in modern web applications.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install icons
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install icons using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Icons?
The Icons skill focuses on transitioning from legacy icon fonts to modern SVG standards, ensuring high performance and native accessibility. It provides a robust architecture for handling decorative and informative icons, using patterns like aria-hidden and aria-labelledby to ensure compatibility with screen readers. By leveraging this Openclaw Skills resource, developers can create theme-aware components that utilize currentColor for seamless color inheritance and establish consistent sizing grids that scale perfectly with typography.
Icons Use Cases
- Creating accessible icon-only buttons for streamlined user interfaces.
- Implementing theme-responsive icons that automatically adjust to light and dark modes.
- Optimizing page load speeds by replacing massive font libraries with tree-shaken SVG sets.
- Building mobile-first interfaces with appropriate touch targets and stroke weights.
- Managing complex icon systems using symbol sprites to reduce DOM overhead.
How Icons Works
- Identify the icon's functional role to determine whether it requires an accessible label or should be hidden from assistive technologies.
- Prepare SVG assets by removing hardcoded color attributes to enable dynamic styling via CSS.
- Implement the icon using either inline SVG for critical path elements or symbol sprites for repeated assets.
- Apply standardized sizing and stroke weights based on the UI context (e.g., 16px for dense layouts, 24px for primary actions).
- Verify that the implementation follows Openclaw Skills best practices for performance and visual consistency.
Icons Setup
To begin using these icon patterns, ensure your environment supports SVG manipulation and CSS inheritance. You can set up a basic icon component using the following CSS pattern:
.icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: middle;
}
If you are using a library, install a tree-shakable set to minimize bundle size:
npm install lucide-react # or your preferred SVG-based icon library
Icons Data Schema & Taxonomy
The skill organizes icon metadata and implementation patterns through a structured approach to attributes and styling:
| Attribute | Context | Impact |
|---|---|---|
| aria-hidden="true" | Decorative Icons | Prevents screen readers from announcing redundant info |
| focusable="false" | All SVGs | Stops IE/Edge from creating extra tab stops |
| fill="currentColor" | Path/SVG | Enables color inheritance from parent text |
| viewBox | SVG Root | Defines the internal coordinate system for scaling |
Icons Advanced Features
- Multi-agent support for auditing entire codebases for accessibility gaps in icon implementation.
- Automated performance benchmarking comparing inline SVGs vs. symbol sprites.
- Support for optical alignment adjustments to ensure icons look balanced regardless of shape.
- Integration with tree-shaking tools to automatically prune unused assets from Openclaw Skills projects.
- Advanced stroke-to-font weight matching for high-fidelity typography integration.
SKILL.md
Loading
Related Openclaw Skills
iCloud
A secure interface for AI agents to interact with iCloud Drive, Photos, and Find My services using local authentication and safety gates.
Ibiza AI Travel & Lifestyle Agent
A high-fidelity guidance system for navigating Ibiza as a traveler, remote worker, or entrepreneur.
Hype
A comprehensive assistant for Hyperliquid perpetuals trading, account management, and L1 ecosystem interactions.
Hungarian
Transform stiff, robotic AI-generated Hungarian into warm, authentic, and human-sounding conversational text.
IELTS Study Assistant
A comprehensive AI study assistant for IELTS candidates featuring automated scoring, band gap analysis, and progress tracking.
AI Image Editing
A comprehensive AI-driven image manipulation skill for professional-grade inpainting, outpainting, background removal, and high-resolution upscaling.
Featured*
