skills.rest
bramanda48
bramanda48COMMUNITY
Explore all skills by this author →
WebsiteGitHub

iconify

Render and bundle Iconify icons via web components, framework wrappers, and offline data packages.

Updated Sep 17, 2026
Search Tags:#frontend#icons#svg#tailwind#iconify#web component#offline bundling
One-click install
npx skills add https://github.com/bramanda48/skills --skill iconify-bramanda48
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: iconify
Source: https://github.com/bramanda48/skills/tree/main/skills/iconify
Command: npx skills add https://github.com/bramanda48/skills --skill iconify-bramanda48

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Choosing the right Iconify package, rendering mode, and delivery strategy is confusing across 200+ icon sets and multiple frameworks. This Skill provides structured guidance for rendering icons with the iconify-icon web component, customising dimensions and colors, bundling icons offline, and integrating with Tailwind CSS. ## Core Features & Use Cases - Web Component Rendering: Use the iconify-icon custom element with attributes for size, flip, rotate, inline mode, and rendering modes (svg, style, bg, mask), plus React and SolidJS wrappers. - Offline Bundling: Register icons locally with addIcon and addCollection using @iconify/json or per-set @iconify-json packages to eliminate API calls. - Advanced Integration: Configure custom API providers, work with the IconifyJSON data format, use @iconify/utils helpers, and add Tailwind v3/v4 icon plugins. - Use Case: You are building a Nuxt 3 app that must work offline. Use this Skill to configure iconify-icon as a custom element, bundle the mdi icon set with addCollection, and render icons without any network requests. ## Quick Start Show me how to render a Material Design home icon in my React app using the iconify-icon web component and bundle it for offline use.

Frequently Asked Questions about iconify

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

FAQPage Schema
How do I render an Iconify icon in React?▼

Install @iconify-icon/react and use the Icon component with an icon name like mdi:home. The wrapper handles className and TypeScript types, while the underlying iconify-icon web component fetches icon data from the API or local storage.

How to use Iconify icons offline without API calls?▼

Install @iconify-json/{prefix} for a single icon set, then call addCollection with the imported JSON data. After registration, iconify-icon resolves those icons locally without any network request.

What is the difference between iconify-icon and @iconify/react?▼

iconify-icon is the recommended web component using Shadow DOM that works across all frameworks. @iconify/react is a legacy native component that is deprecated but still supported; new projects should prefer the web component.

Does iconify-icon work with Nuxt 3 SSR?▼

Yes, but you must declare iconify-icon as a custom element in the Nuxt config via vue.compilerOptions.isCustomElement to avoid dev-mode warnings. Shadow DOM rendering prevents hydration mismatches.

Why can't I change the color of some Iconify icons?▼

Palette icons have hardcoded colors and ignore CSS color. Only monotone icons use currentColor and inherit color from CSS. Check the icon set's palette metadata flag to determine which type you are using.

How do I use Iconify icons with Tailwind CSS?▼

Use @iconify/tailwind4 for Tailwind v4 via a CSS @plugin directive, or @iconify/tailwind for v3 with addIconSelectors and addDynamicIconSelectors. Icons render as pure CSS classes like icon-[mdi-light--home] with no JS component.

Related Skills

Explore More Software Engineering Skills→
HouseGarofaloHouseGarofalo
3

vite

Build frontend applications with Vite for React, Vue, and Svelte.

Official
Intermediate
cfardevcfardev

react-icons

Render SVG icons in React/Next.js by importing from react-icons.

Community
Basic
marktantongcomarktantongco

visual-design-foundations

Standardize visual design tokens for typography, color, spacing, and iconography.

Community
Intermediate
andersoncollabandersoncollab

icon-systems

Standardize icon library selection and SVG implementation for consistent sizing and accessibility.

Community
Intermediate