Health Icons
healthicons · 2 042 иконки · автор: Resolve to Save Lives · MIT · одноцветные · сетка 24 px · Обновлено
Health Icons — бесплатный набор иконок с открытым кодом: 2 042 SVG-иконки от Resolve to Save Lives, выпущенный под лицензией MIT. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Health Icons
- залитый
- монохромный
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 48 × 48 · 76% иконок |
|---|---|
| viewBox | 0 0 48 48 |
| Область рисования | 40 × 40, отступ 4 |
| Стиль рисования | Залитые фигуры |
| Радиус скругления | 1 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 60% горизонтальные или вертикальные, 10% под 45° |
| Кривые | 54% команд рисования |
| Симметрия | 24% иконок симметричны слева направо |
| Элементов на иконку | 2 |
| Команд рисования на иконку | 50 |
Измерено по 63 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Health Icons by Resolve to Save Lives, licensed under MIT. https://github.com/resolvetosavelives/healthicons/blob/main/LICENSE
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Health Icons" icon set (Iconify prefix "healthicons") by Resolve to Save Lives.
Style: filled, solid, monochrome.
Iconify describes the set as: Precise Shapes.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">.
- Keep the drawing inside a 40x40 live area: about 4 units of padding on every side (never less than 2).
- A typical icon's bounding box covers 52% of the canvas.
Drawing
- Filled icons: draw closed filled shapes; don't use strokes.
- Wrap the shapes in <g fill="currentColor">, as 51% of the set does.
- Use fill-rule="evenodd" for holes.
- Round corners with a radius of about 1.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 60% horizontal or vertical, 10% at 45 degrees.
- About 54% of drawing commands are curves or arcs.
- Keep it simple: about 2 elements and 50 drawing commands per icon.
- Elements used by the set: path, g.
Color
- Monochrome: paint with currentColor only, never a fixed color.
Output
- Reply with one complete <svg> element and nothing else: no comments, <title>, ids or scripts.
- Match the examples: reuse their shapes for shared parts (arrow heads, people, documents, badges).
О наборе Health Icons
Набор разделён на 21 категорию: символы (448), люди (214), устройства (200) и тело (184).
Популярные Health Icons: cold chain, emergency post, asthma outline, exercise, health alt и heart.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Health Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Health Icons по категориям
Иконки Символы (448)
Иконки Люди (214)
Иконки Устройства (200)
Иконки Тело (184)
Иконки Заболевания (140)
Иконки Эмоции (100)
Иконки Типографика (96)
Иконки Специальности (84)
Иконки Диагностика (68)
Иконки Контрацептивы (58)
Иконки Места (58)
Иконки Предметы (56)
Как использовать Health Icons
Все иконки на этой странице работают в любом фреймворке. В примерах используется healthicons:cold-chain; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="healthicons:cold-chain" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="healthicons:cold-chain" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="healthicons:cold-chain" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[healthicons--cold-chain]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/healthicons -->
<div class="i-healthicons:cold-chain"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="healthicons:cold-chain"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/healthicons/cold-chain.svg" alt="Иконка Cold Chain" width="24" height="24">Вопросы и ответы: Health Icons
Можно ли бесплатно использовать Health Icons в коммерческих проектах?
Да. Health Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Health Icons?
В наборе Health Icons 2 042 иконки в 21 категории.
Какая лицензия у набора Health Icons?
Health Icons распространяются по лицензии MIT. Полный текст лицензии доступен по адресу https://github.com/resolvetosavelives/healthicons/blob/main/LICENSE.
Кто создал Health Icons?
Автор набора Health Icons — Resolve to Save Lives.
Как использовать Health Icons в React?
Установите @iconify/react и отрисуйте <Icon icon="healthicons:cold-chain" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Health Icons?
Health Icons нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.