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 Vue

Every Health icon as a Vue 3 component. Import just the icons you need, in either style, at any size and in any color.

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/vue or pnpm add @healthicons/vue instead.

    npm install @healthicons/vue

  2. Find an icon

    Browse the icons and click one you like. The window that opens shows its Code name, like BloodBag, with a button to copy it: that’s the name to use in your code.

  3. Add it to your page

    Import the icon by its name and use it like any other component.

    <script setup>
import { BloodBag } from '@healthicons/vue';
</script>

<template>
  <BloodBag />
</template>
    Result

  4. Change how it looks

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

    <BloodBag variant="filled" :size="48" color="#6666ff" />
    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

Next to text

With size="1em" an icon is as tall as the text, and it’s the text’s color unless you give it another.

<button>
  <Heart size="1em" /> Save
</button>
Result
Save

For screen readers

Icons are hidden from screen readers unless they have a title. Give one to icons that aren’t next to words saying the same thing.

<Heart title="Saved to favorites" />
Result

With your own styles

Like any element, icons take a class and style.

<BloodBag
  color="#6666ff"
  style="padding: 6px; background: #ebebff; border-radius: 50%"
/>
Result

Options

Set these as props. Anything else, like a class or style, is 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.

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.