Covid Icons
covid · 142 иконки · автор: Streamline · CC-BY-4.0 · одноцветные · сетка 24 px · Обновлено
Covid Icons — бесплатный набор иконок с открытым кодом: 142 SVG-иконки от Streamline, выпущенный под лицензией CC BY 4.0. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Covid Icons
- контурный
- монохромный
- скруглённый
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | Весь холст, без отступов |
| Стиль рисования | Контурный (обводка) |
| Толщина обводки | 1.5 |
| Концы линий | Скруглённые |
| Соединения линий | Скруглённые |
| Радиус скругления | 1.5 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 56% горизонтальные или вертикальные, 35% под 45° |
| Кривые | 33% команд рисования |
| Симметрия | 21% иконок симметричны слева направо |
| Элементов на иконку | 2.4 |
| Команд рисования на иконку | 25 |
Измерено по 63 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Covid Icons by Streamline, licensed under CC BY 4.0. https://creativecommons.org/licenses/by/4.0/
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Covid Icons" icon set (Iconify prefix "covid") by Streamline.
Style: outline, line, monochrome, rounded.
Iconify describes the set as: Uses Stroke.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">.
- Draw edge to edge: icons use the full canvas with no padding.
- A typical icon's bounding box covers 98% of the canvas.
Drawing
- Outline icons: draw with strokes only and fill="none"; solid shapes are the exception.
- stroke-width="1.5".
- stroke-linecap="round", stroke-linejoin="round".
- Wrap the shapes in <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">, as 59% of the set does.
- Round corners with a radius of about 1.5.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 56% horizontal or vertical, 35% at 45 degrees.
- About 33% of drawing commands are curves or arcs.
- Keep it simple: about 2 elements and 25 drawing commands per icon.
- Elements used by the set: path, g, defs, use.
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).
О наборе Covid Icons
Набор разделён на 11 категорий, в том числе личная гигиена (22), передача (22), социальная дистанция (21) и covid-19 (18).
Популярные Covid Icons: social distancing correct 2, personal hygiene clean toothpaste, vaccine protection medicine pill, social distancing not allowed space man, graph cured increasing и social distancing attention.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Covid Icons выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.
Covid Icons по категориям
Иконки Личная гигиена (22)
Иконки Передача (22)
Иконки Социальная дистанция (21)
Иконки COVID-19 (18)
Иконки Вакцины и защита (13)
Иконки Карантин (11)
Иконки Симптомы (11)
Иконки График (10)
Иконки Исследование вирусов (6)
Иконки Носитель COVID (4)
Иконки Мутации (4)
Как использовать Covid Icons
Все иконки на этой странице работают в любом фреймворке. В примерах используется covid:social-distancing-correct-2; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="covid:social-distancing-correct-2" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="covid:social-distancing-correct-2" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="covid:social-distancing-correct-2" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[covid--social-distancing-correct-2]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/covid -->
<div class="i-covid:social-distancing-correct-2"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="covid:social-distancing-correct-2"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/covid/social-distancing-correct-2.svg" alt="Иконка Social Distancing Correct 2" width="24" height="24">Вопросы и ответы: Covid Icons
Можно ли бесплатно использовать Covid Icons в коммерческих проектах?
Да. Covid Icons выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.
Сколько иконок в наборе Covid Icons?
В наборе Covid Icons 142 иконки в 11 категориях.
Какая лицензия у набора Covid Icons?
Covid Icons распространяются по лицензии CC BY 4.0. Полный текст лицензии доступен по адресу https://creativecommons.org/licenses/by/4.0/.
Кто создал Covid Icons?
Автор набора Covid Icons — Streamline.
Как использовать Covid Icons в React?
Установите @iconify/react и отрисуйте <Icon icon="covid:social-distancing-correct-2" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Covid Icons?
Covid Icons нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.