Astro Icon

Astro Icon is an Astro integration that adds a single <Icon> component for rendering SVG icons, either from local files in src/icons/ or from any of the thousands of icon sets available through Iconify. Local icons are automatically optimized with svgo at build time with no extra configuration step.

Because icons are inlined directly into the HTML rather than loaded as external image requests, Astro Icon avoids extra network round-trips and lets icons be styled with plain CSS via [data-icon] attribute selectors, including per-icon overrides.

What You Get

• A drop-in Icon component installed via astro add astro-icon with zero required configuration
• Support for local SVG icons placed in src/icons/, automatically optimized with svgo
• Out-of-the-box access to every icon set on Iconify (mdi:account, etc.) by installing the matching @iconify-json/* package
• CSS styling via [data-icon] and [data-icon="name"] attribute selectors, including Tailwind class support
• An include/svgoOptions config for controlling which Iconify icons get bundled in server output and how SVGs are optimized

Common Use Cases

• Adding a consistent icon component to an Astro site without manually managing individual SVG imports
• Pulling in icons from large icon sets (Material Design Icons, Font Awesome, etc.) via Iconify without downloading assets manually
• Reducing extra HTTP requests by inlining SVGs directly into server-rendered HTML instead of using <img> tags
• Styling icons dynamically with CSS/Tailwind classes since inlined SVGs respond to fill/color rules unlike raster images

Under The Hood

Architecture: The repo is a small monorepo (packages/core, packages/service, packages/www) where core implements the Astro integration hook that registers a Vite virtual module and the Icon.astro component, resolving icon names either to local files in src/icons/ or to Iconify’s JSON icon-set packages at build/request time. Tech Stack: TypeScript and Astro components, using svgo for SVG optimization and Iconify’s icon-set packages as an on-demand data source, managed as a pnpm workspace. Code Quality: The project is primarily documentation-heavy (MDX makes up over half the repo’s bytes, reflecting its docs site) with a smaller TypeScript core; commit activity has slowed markedly and the health scan flags it as low-activity, though the integration is stable and widely adopted for its narrow scope. API Design: Usage is a single <Icon name="..." /> component with a handful of optional props (size, title, desc), requiring no manual SVG wiring — one of the lowest-friction icon integrations in the Astro ecosystem.