Healing Icons for VS Code

Search 3,500+ icons in 4 styles without leaving the editor, and insert them as code for your framework.

Features

• Healing Icons: Insert Icon (Ctrl+Alt+I, Cmd+Alt+I on macOS): a searchable picker with previews. Search by name or tag; the button in the title bar switches the style (outline, outline-duo, fill, glyph-duo). The icon is inserted for the file you are in, and its import is added:

  File	Inserts
  .jsx / .tsx	<HeartIcon /> + import { HeartIcon } from "@healing-icons/react/<style>" (React Native projects: @healing-icons/react-native)
  .vue	<HeartIcon /> + import in <script setup>
  .svelte	<HeartIcon /> + import HeartIcon from "@healing-icons/svelte/<style>/HeartIcon"
  .html	<healing-icon name="heart"> (Angular projects: <healing-icon [icon]="HeartIcon" />)
  anything else	the SVG markup

• Healing Icons: Copy Icon SVG: copies the SVG markup.

• Hover previews: hover HeartIcon (or name="heart" on <healing-icon>) to see the icon, its style and tags.

Settings

• healingIcons.defaultStyle: the style the picker opens with (default outline).
• healingIcons.framework: auto (default) or a fixed framework for Insert Icon.

Icon data is downloaded from healing-icons.vercel.app on first use and cached; it refreshes once a day. Docs · MIT