v0.7.0 · React, Vue, Svelte, Angular và hơn thế

3.504 icon, 4 kiểu.

Tìm kiếm, copy SVG hoặc cài cho React, Vue, Svelte, Angular, React Native hay dùng như web component. Miễn phí, giấy phép MIT.

Cách dùng

Các kiểu: outlineoutline-duofillglyph-duo. Import component từ @healing-icons/react/<style> hoặc @healing-icons/vue/<style>; file SVG thuần nằm ở 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>

SVG thuần

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

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

Svelte, Angular, React Native, web component, CDN và sprite: xem tài liệu →

Ngay trong editor và công cụ thiết kế

Tìm và chèn icon mà không cần mở website.

  • VS Code

    Tìm icon có ảnh xem trước và chèn code đúng với file đang mở (Ctrl Alt I), tự thêm dòng import. Rê chuột lên tên icon để xem icon.