icons

Name: icons
Availability: InStock
Author: Périmètre

Enforce accessible, theme-aware icon usage with @perimetre/icons in React/TypeScript projects.

Updated Aug 23, 2026

Search Tags:#typescript #theming #accessibility #react #svg #icon #ui-patterns

Ready to run

npx skills add https://github.com/perimetre/ai-toolkit --skill icons-perimetre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: icons
Source: https://github.com/perimetre/ai-toolkit/tree/main/plugins/perimetre-apps/skills/icons
Command: npx skills add https://github.com/perimetre/ai-toolkit --skill icons-perimetre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Périmètre icon patterns using @perimetre/icons. Use when adding icons, building icon components, or reviewing icon usage. Covers the Icon wrapper component, currentColor, aria-hidden vs label, and avoiding Next.js Image for SVGs.

Core Features & Use Cases

Standardized Icon component with proper aria and label handling, currentColor usage, and SVG optimization guidance.
Clear usage patterns for decorative vs meaningful icons and internationalization support.
Guidance on structuring and reusing icons within a React/TS project.

Quick Start

Import and use the Icon components with usage-site accessibility props to render an accessible icon in your app.

Frequently Asked Questions about icons

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

FAQPage Schema

How do I make SVG icons accessible in React and TypeScript?▼

Make SVG icons accessible in React by applying aria-hidden for decorative elements and aria-label for meaningful icons, ensuring screen readers correctly interpret usage based on context.

When should I use aria-hidden versus aria-label for UI icons?▼

Use aria-hidden for purely decorative icons with adjacent text, but apply aria-label when the icon communicates essential information or serves as an interactive control without text.

What is the best way to handle color theming for SVG icons?▼

Handle SVG icon color theming by using the CSS currentColor value, which allows icons to automatically inherit and adapt to the text color of their parent container.

Why should I avoid using Next.js Image for static SVG icons?▼

Avoid using Next.js Image for static SVGs because it adds unnecessary optimization overhead intended for raster images, whereas inline SVGs or dedicated icon components render more efficiently.

Does this icon component pattern support internationalization scenarios?▼

Yes, the icon component pattern supports internationalization by structuring icon usage to adapt to different locales and ensuring meaningful icons have translatable, localized aria-label attributes.

Can I use this icon pattern in any React project?▼

Yes, you can use this pattern in React projects, although the standardized Icon wrapper component is specifically designed for projects utilizing the @perimetre/icons package.