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.

Packages

Use Health icons in your website or app. Import just the icons you need, in either style, at any size and in any color.

Not sure which to choose?

If your site is built with another framework or if it’s a plain HTML page, use the JavaScript package.

Using AI?

Copy this prompt into ChatGPT, Claude, Copilot or another AI assistant before asking it to add icons. It explains how the packages work, so the assistant picks the right one for your project and doesn’t make up icon names. Add what you’d like it to do at the end.

Prompt
I'm using Health Icons (https://healthicons.org), free public domain health icons, in my project. Use the official package that fits the project, and follow these rules:

1. Pick the package from the project's framework and install it with npm:
   - React or Next.js: @healthicons/react. Import each icon as a component: import { BloodBag } from '@healthicons/react'; then <BloodBag />.
   - Vue or Nuxt: @healthicons/vue. Import each icon as a component: import { BloodBag } from '@healthicons/vue'; then <BloodBag />.
   - Svelte or SvelteKit: @healthicons/svelte. Import each icon as a component: import { BloodBag } from '@healthicons/svelte'; then <BloodBag />. For events, use onclick in Svelte 5 or on:click in Svelte 4.
   - Anything else, including plain HTML: @healthicons/core. Put placeholders in the HTML using the icon's name from healthicons.org (with dashes), <i data-healthicon="blood-bag"></i>, then replace them: import { createIcons, BloodBag } from '@healthicons/core'; createIcons({ icons: { BloodBag } }). To build icons in code, use toSvg(BloodBag, options) for an SVG string or createElement(BloodBag, options) for an element.
2. Only import the icons you use.
3. In code, an icon's name is its name on healthicons.org in PascalCase: blood-bag is BloodBag, blister-pills_oval_x14 is BlisterPillsOvalX14. Exceptions: 0 to 9 are Number0 to Number9, ! is ExclamationPoint, and 4x4 is SUV. Each icon's page on healthicons.org shows its code name. Don't invent names: if you're not sure an icon exists, tell me and suggest searching healthicons.org.
4. Options (props for components; data-variant, data-size, data-color and data-title on placeholders): variant ("outline", the default, or "filled"), size (pixels or any CSS size like "1em"; default 24), color (any CSS color; icons use the text color by default, so prefer styling the text color) and title. Other attributes, like a class or style, go on the <svg> element.
5. Icons are hidden from screen readers by default, which is right when they're next to text that says the same thing. If an icon is the only way something is communicated, give it a title. Put clickable icons inside a <button> with an accessible label rather than making the icon itself clickable.
6. Don't use the unofficial healthicons-react or healthicons-vue packages, and don't copy SVG files into the project.

What I'd like you to do:

Other ways to get the icons