Packages

| Package | For | | --- | --- | | @healing-icons/react | React components | | @healing-icons/vue | Vue 3 components | | @healing-icons/svelte | Svelte 5 components | | @healing-icons/angular | Angular standalone component | | @healing-icons/react-native | React Native (react-native-svg) | | @healing-icons/elements | <healing-icon> web component: any framework, plain HTML, CDN | | @healing-icons/font | Icon fonts (TTF + WOFF2) with ligatures: Figma, Office, Windows apps, web | | healing-icons (this one) | Optimized SVG files, sprites, metadata and types, for any framework or tool |

Guides for each: healing-icons.vercel.app/docs.

Upgrading from 0.5? The React and Vue components moved to their own packages in 0.6.0: healing-icons → @healing-icons/react, healing-icons/vue → @healing-icons/vue. Props and names are unchanged.

Plain SVG

npm install healing-icons

import heartUrl from "healing-icons/svg/outline/heart.svg";   // any bundler

<img src={heartUrl} alt="" />

Files live at healing-icons/svg/<style>/<name>.svg for the styles outline, outline-duo, fill and glyph-duo. Single-color icons use currentColor, so inline SVG follows the CSS text color.

From a CDN

Every file is on jsDelivr and unpkg. Pin the version in production:

<img src="https://cdn.jsdelivr.net/npm/[email protected]/svg/outline/heart.svg" width="24" height="24" alt="">

An <img> can't use the page's text color. To recolor a CDN icon, use it as a CSS mask:

.icon-heart {
  width: 24px; height: 24px;
  background: currentColor;
  mask: url(https://cdn.jsdelivr.net/npm/[email protected]/svg/outline/heart.svg) center / contain no-repeat;
}

For many icons on a page without a build step, use the web component: @healing-icons/elements.

Sprite

Build an SVG sprite with just the icons you use, then reference them with <use>:

npx healing-icons sprite heart star arrow-left --style outline --out public/icons.svg

<svg width="24" height="24"><use href="/icons.svg#heart"/></svg>

--all adds every icon of a style. The same builder is available in code:

import { createSprite } from "healing-icons/sprite";

createSprite([["heart", heartSvgMarkup]]);   // "<svg …><symbol id=\"heart\" …>…</symbol></svg>"

Search

Find icons from the terminal, with the same search as the website (synonyms, small typos, Vietnamese, old names):

npx healing-icons search shopping cart
npx healing-icons search trash --style fill --limit 5 --json

In code:

import { rankIcons } from "healing-icons/search";
import icons from "healing-icons/icons.json" with { type: "json" };

rankIcons(icons, "hart", (icon) => icon)[0].name;   // "heart"

Animations

healing-icons/animations.css (also in every component package) adds hi-spin, hi-spin-reverse, hi-pulse, hi-beat, hi-fade, hi-bounce, hi-shake, hi-wiggle and hi-float, tunable with --hi-animation-duration and friends, and off for people who ask for reduced motion:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/animations.css">
<img src="https://cdn.jsdelivr.net/npm/[email protected]/svg/outline/loader.svg" class="hi-spin" alt="Loading">

Icon font

Every style is also an icon font (TTF + WOFF2) in @healing-icons/font. Type an icon's name in the font and it becomes the icon, so after installing the .ttf it works in Figma, Word and PowerPoint. On the web: <i class="hi-font-outline hi-heart"></i>; in Windows apps, the fixed codepoint listed in icons.json.

Metadata and types

healing-icons/icons.json lists every icon with its component name, category, available styles, search tags, icon-font codepoint (plus aliases, the old names of renamed icons; those keep working as deprecated copies until a major version).

import type { IconName, IconStyle } from "healing-icons";
import { styles } from "healing-icons";   // ["outline", "outline-duo", "fill", "glyph-duo"]

Links

Docs · Changelog · All icons · License: MIT © Hoang Huy Linh