skills.rest
perimetre
perimetreOFFICIAL
Explore all skills by this author →
WebsiteGitHub

icons

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
One-click install
npx skills add https://github.com/perimetre/ai-toolkit --skill icons-perimetre
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
patternflypatternfly
10

figma-icon-finder

Identify PatternFly icons in Figma designs and generate React import statements.

Official
Intermediate
yono92yono92

accessibility-testing

Automate web accessibility testing against WCAG standards with axe-core, Playwright, and Jest.

Community
Intermediate
datamonsterrdatamonsterr

tailwind-patterns

Implement Tailwind CSS v4 CSS-first patterns, container queries, and design tokens.

Community
Intermediate
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced