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 Svelte

Every Health icon as a Svelte component, for Svelte 4 and 5. 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/svelte or pnpm add @healthicons/svelte instead.

    npm install @healthicons/svelte

  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>
  import { BloodBag } from '@healthicons/svelte';
</script>

<BloodBag />
    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

Handling clicks

In Svelte 5, use onclick. In Svelte 4, use on:click (which also works in Svelte 5). Other events, like on:mouseenter and on:keydown, work too. If people should be able to click an icon, put it in a <button> so keyboards and screen readers can use it.

<button onclick={save}>
  <Heart size="1em" /> Save
</button>

<!-- Svelte 4 -->
<Heart on:click={save} />

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.