coolicons
ci · 442 иконки · автор: Kryston Schwarze · CC-BY-4.0 · одноцветные · сетка 24 px · Обновлено
coolicons — бесплатный набор иконок с открытым кодом: 442 SVG-иконки от Kryston Schwarze, выпущенный под лицензией CC BY 4.0. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: coolicons
- контурный
- монохромный
- скруглённый
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | 20 × 20, отступ 2 |
| Стиль рисования | Контурный (обводка) |
| Толщина обводки | 2 |
| Концы линий | Скруглённые |
| Соединения линий | Скруглённые |
| Радиус скругления | 2 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 70% горизонтальные или вертикальные, 18% под 45° |
| Кривые | 60% команд рисования |
| Симметрия | 41% иконок симметричны слева направо |
| Элементов на иконку | 1.1 |
| Команд рисования на иконку | 16 |
Измерено по 64 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on coolicons by Kryston Schwarze, licensed under CC BY 4.0. https://creativecommons.org/licenses/by/4.0/
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "coolicons" icon set (Iconify prefix "ci") by Kryston Schwarze.
Style: outline, line, monochrome, rounded.
Iconify describes the set as: Precise Shapes, Has Padding, Uses Stroke.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">.
- Keep the drawing inside a 20x20 live area: about 2 units of padding on every side (never less than 1).
- A typical icon's bounding box covers 63% of the canvas.
Drawing
- Outline icons: draw with strokes only and fill="none"; solid shapes are the exception.
- stroke-width="2".
- stroke-linecap="round", stroke-linejoin="round".
- Round corners with a radius of about 2.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 70% horizontal or vertical, 18% at 45 degrees.
- About 60% of drawing commands are curves or arcs.
- Prefer left-right symmetric shapes (41% of icons are symmetric).
- Keep it simple: about 1 element and 16 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).
О наборе coolicons
Набор разделён на 14 категорий, в том числе интерфейс (73), стрелка (72), редактирование (72) и файл (39).
Популярные coolicons: bulb, house 01, compass, chevron up, shield warning и shrink.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. coolicons выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.
coolicons по категориям
Иконки Интерфейс (73)
Иконки Стрелка (72)
Иконки Редактирование (72)
Иконки Файл (39)
Иконки Система (37)
Иконки Связь (27)
Иконки Медиа (22)
Иконки Предупреждение (20)
Иконки Календарь (14)
Иконки Окружающая среда (13)
Как использовать coolicons
Все иконки на этой странице работают в любом фреймворке. В примерах используется ci:bulb; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="ci:bulb" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="ci:bulb" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="ci:bulb" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[ci--bulb]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/ci -->
<div class="i-ci:bulb"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="ci:bulb"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/ci/bulb.svg" alt="Иконка Bulb" width="24" height="24">Вопросы и ответы: coolicons
Можно ли бесплатно использовать coolicons в коммерческих проектах?
Да. coolicons выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.
Сколько иконок в наборе coolicons?
В наборе coolicons 442 иконки в 14 категориях.
Какая лицензия у набора coolicons?
coolicons распространяются по лицензии CC BY 4.0. Полный текст лицензии доступен по адресу https://creativecommons.org/licenses/by/4.0/.
Кто создал coolicons?
Автор набора coolicons — Kryston Schwarze.
Как использовать coolicons в React?
Установите @iconify/react и отрисуйте <Icon icon="ci:bulb" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера coolicons?
coolicons нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.