Free open-source health icons for use in your next commercial or personal project. Editing is ok. Republishing is ok. No need to give credit.

Health icons for JavaScript

Health icons for any website: put placeholders in your HTML and they become icons. Or make icons in code, as SVG text or elements.

Every icon comes outlined and filled, at any size and in any color.

Getting started

  1. Install the package

    In your project’s folder, run this command. Using Yarn or pnpm? Run yarn add @healthicons/core or pnpm add @healthicons/core instead.

    npm install @healthicons/core

  2. Find an icon

    Browse the icons and click one you like. The window that opens shows its Filename, like blood-bag, which you use in your HTML, and its Code name, like BloodBag, which you use in your JavaScript.

  3. Put placeholders in your HTML

    Add an <i> tag where each icon should go, with the icon’s name from this site (with dashes, like blood-bag).

    <i data-healthicon="blood-bag"></i>

  4. Turn them into icons

    In your JavaScript, import the icons you use (in PascalCase) and call createIcons. It replaces each placeholder with its icon.

    import { createIcons, BloodBag } from '@healthicons/core';

createIcons({ icons: { BloodBag } });
    Result

  5. Change how it looks

    Icons are outlined and 24 pixels by default, in the color of the text around them. Change any of these on the placeholder.

    <i
  data-healthicon="blood-bag"
  data-variant="filled"
  data-size="48"
  data-color="#6666ff"
></i>
    Result

Using AI?

Copy our prompt for AI assistants before asking ChatGPT, Claude, Copilot or another assistant to add icons, so it uses the package correctly.

Examples

Without installing anything

No build tools? Load the package from a CDN instead of step 1. This loads every icon, so it’s best for small sites and trying things out.

<i data-healthicon="heart"></i>

<script type="module">
  import { createIcons, icons } from
    'https://cdn.jsdelivr.net/npm/@healthicons/core/+esm';

  createIcons({ icons });
</script>
Result

As SVG text

toSvg gives an icon’s <svg> as text, to add to HTML you’re building.

import { toSvg, BloodBag } from '@healthicons/core';

const svg = toSvg(BloodBag, { variant: 'filled', size: 32 });
Result

As an element

createElement gives an <svg> element to add to the page.

import { createElement, BloodBag } from '@healthicons/core';

document.body.append(createElement(BloodBag, { title: 'Blood bag' }));
Result

Options

On placeholders, set these as data- attributes (data-variant="filled"); with toSvg and createElement, as options. Other attributes, like a class, are added to the icon’s <svg> element.

OptionDefaultWhat it does
variantoutlineThe style: outline or filled
size24Width and height, in pixels or any CSS size (like 1.5em). At 24 pixels and smaller, icons that have a version drawn for small sizes use it.
colorThe text colorAny CSS color
titleNoneShown as a tooltip and read out by screen readers. Without a title (or an aria-label), icons are hidden from screen readers.

Icon names

The easiest way to get an icon’s name is from the icon itself: open it in the icon library and copy its Code name. For placeholders, use its Filename instead, like blood-bag.

Code names follow a pattern: they’re the filename in PascalCase, so blood-bag is BloodBag and blister-pills_oval_x14 is BlisterPillsOvalX14. A few filenames can’t be written that way, so they use the icon’s title: 0 to 9 are Number0 to Number9, ! is ExclamationPoint and 4x4 is SUV.

If your editor suggests names as you type (most do), start typing what you’re looking for after the { in your import to see the matching icons.