Ionicons

Ionicons is an open-source icon library of over 1,300 SVG icons built by the Ionic team, distributed as a Stencil-built web component (<ion-icon>) that lazy-loads only the SVGs actually visible on the page. Every icon ships in three visual variants — filled, outline, and sharp — so an app can match either Material Design or iOS platform conventions, or switch per-platform automatically inside Ionic Framework via the ios/md attributes.

With over 18,000 GitHub stars and roughly 666,000 weekly npm downloads, Ionicons is usable independently of Ionic Framework in any web app via a single script tag or npm install, and ships as plain SVGs that can also be imported directly as individual ES modules for tree-shaken bundles.

What You Get

• 1,300+ icons across general UI, brand/logo, and platform-specific categories, each with filled, outline, and sharp variants
• An <ion-icon> web component that dynamically fetches only the SVGs currently visible in the viewport
• Individual named ES module exports (import { heart, save } from 'ionicons/icons') for tree-shaken, no-web-component usage
• Automatic platform-specific icon selection (ios/md attributes) when used inside Ionic Framework
• CSS custom properties for sizing, color, and outline stroke width without touching the underlying SVG

Common Use Cases

• Dropping a consistent, platform-aware icon set into a hybrid mobile app built with Ionic Framework and Capacitor
• Adding a lightweight icon system to any web app via a single CDN <script> tag, without a build step
• Tree-shaking only the specific icons a bundle needs by importing named icon modules directly
• Matching an app’s icon style to iOS or Material Design conventions automatically per platform

Under The Hood

Architecture — Ionicons is built with StencilJS, compiling a single <ion-icon> web component (src/components) backed by a flat src/svg directory of 1,357 raw SVG files and a data.json icon manifest mapping names to variants. The runtime component (src/index.ts plus generated components.d.ts) uses an IntersectionObserver-driven lazy loader so only icons scrolled into view trigger an SVG fetch, keeping initial page weight low even with a 1,300+ icon library installed.

Tech Stack — TypeScript (80% of the codebase) via Stencil for the web-component build, with the published npm package exposing CJS, ESM, a CDN-ready dist/ionicons bundle, and a Web Types manifest (ionicons.web-types.json) for IDE autocompletion. Jest and Playwright cover unit and end-to-end testing respectively.

Code Quality — The 1,357 SVG source icons are paired with a generated data manifest keeping names, tags, and variants in sync, and Playwright end-to-end tests validate the web component’s rendering and lazy-loading behavior across variants. Development pace has slowed in recent months (0 commits/month in the latest window against a historical average, moderate-to-low maintenance_consistency in the health breakdown) even though the project remains actively released and widely adopted.

API Design — The primary API is deliberately declarative and framework-agnostic: <ion-icon name="heart-outline"> requires no JavaScript beyond the loader script, while the ES module import path (import { heart } from 'ionicons/icons') exists specifically for consumers who want compile-time tree-shaking instead of the web component’s runtime SVG fetch — giving two clear on-ramps depending on whether bundle size or zero-config usage matters more.