v0.7.0 · React, Vue, Svelte, Angular & more

3,504 icons in 4 styles.

Search, copy SVG, or install them for React, Vue, Svelte, Angular, React Native or as a web component. Free and MIT licensed.

Usage

Styles: outlineoutline-duofillglyph-duo. Import components from @healing-icons/react/<style> or @healing-icons/vue/<style>; plain SVG files are in healing-icons/svg/<style>.

React

import { HeartIcon } from "@healing-icons/react";        // outline
import { HeartIcon as HeartFill } from "@healing-icons/react/fill";

export function Like({ liked }) {
  return liked ? <HeartFill color="tomato" /> : <HeartIcon size={20} />;
}

Vue 3

<script setup>
import { HeartIcon } from "@healing-icons/vue";
import { HeartIcon as HeartFill } from "@healing-icons/vue/fill";
defineProps(["liked"]);
</script>

<template>
  <HeartFill v-if="liked" color="tomato" />
  <HeartIcon v-else :size="20" />
</template>

Plain SVG

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

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

Svelte, Angular, React Native, web component, CDN and sprites: read the docs →

In your editor and design tools

Find and insert icons without opening the website.

  • VS Code

    Search icons with previews and insert them as code for the file you're in (Ctrl Alt I), with the import added. Hover an icon name to see it.

    VS Code Marketplace →