Иконки IconPark
icon-park · 2 658 иконок · автор: ByteDance · Apache-2.0 · многоцветные · сетка 24 px · Обновлено
Иконки IconPark — бесплатный набор иконок с открытым кодом: 2 658 SVG-иконок от ByteDance, выпущенный под лицензией Apache 2.0. Иконки многоцветные, поэтому сохраняют свои цвета в любом размере. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Иконки IconPark
- контурный
- многоцветные
- скруглённый
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 48 × 48 |
|---|---|
| viewBox | 0 0 48 48 |
| Область рисования | 44 × 44, отступ 2 |
| Стиль рисования | Контурный (обводка) |
| Толщина обводки | 4 |
| Концы линий | Скруглённые |
| Соединения линий | Скруглённые |
| Радиус скругления | 3 |
| Цвета | Около 2 цветов на иконку |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 66% горизонтальные или вертикальные, 11% под 45° |
| Кривые | 49% команд рисования |
| Симметрия | 47% иконок симметричны слева направо |
| Элементов на иконку | 4.2 |
| Команд рисования на иконку | 14 |
Измерено по 62 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on IconPark by ByteDance, licensed under Apache 2.0. https://github.com/bytedance/IconPark/blob/master/LICENSE
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "IconPark" icon set (Iconify prefix "icon-park") by ByteDance.
Style: outline, line, multicolor, 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 48 48">.
- Keep the drawing inside a 44x44 live area: about 2 units of padding on every side (never less than 1.21).
- A typical icon's bounding box covers 75% of the canvas.
Drawing
- Outline icons: draw with strokes only and fill="none"; solid shapes are the exception.
- stroke-width="4".
- stroke-linecap="round", stroke-linejoin="round".
- Round corners with a radius of about 3.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 66% horizontal or vertical, 11% at 45 degrees.
- About 49% of drawing commands are curves or arcs.
- Prefer left-right symmetric shapes (47% of icons are symmetric).
- Keep it simple: about 4 elements and 14 drawing commands per icon.
- Elements used by the set: path, g, circle, rect.
Color
- Multicolor, about 2 colors per icon. Use this palette: #000000, #2f88ff, #ffffff, #43ccf8.
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).
О наборе Иконки IconPark
Набор разделён на 39 категорий, в том числе редактирование (364), оборудование (223), офис (215) и стрелки (137).
Популярные Иконки IconPark: add one, english mustache, basketball clothes, sort, lightning и pinwheel.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Иконки IconPark выпущены под лицензией Apache 2.0, которая разрешает использование в личных и коммерческих проектах.
Иконки IconPark по категориям
Иконки Редактирование (364)
Иконки Оборудование (223)
Иконки Офис (215)
Иконки Стрелки (137)
Иконки Абстракция (121)
Иконки Продукты (121)
Иконки Путешествия (101)
Иконки Спорт (84)
Иконки Бренд (83)
Иконки Деньги (80)
Иконки Одежда (72)
Иконки Сборка (70)
Как использовать Иконки IconPark
Все иконки на этой странице работают в любом фреймворке. В примерах используется icon-park:add-one; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:add-one" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:add-one" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:add-one" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--add-one]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:add-one"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:add-one"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/icon-park/add-one.svg" alt="Иконка Add One" width="24" height="24">Вопросы и ответы: Иконки IconPark
Можно ли бесплатно использовать Иконки IconPark в коммерческих проектах?
Да. Иконки IconPark выпущены под лицензией Apache 2.0, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Иконки IconPark?
В наборе Иконки IconPark 2 658 иконок в 39 категориях.
Какая лицензия у набора Иконки IconPark?
Иконки IconPark распространяются по лицензии Apache 2.0. Полный текст лицензии доступен по адресу https://github.com/bytedance/IconPark/blob/master/LICENSE.
Кто создал Иконки IconPark?
Автор набора Иконки IconPark — ByteDance.
Как использовать Иконки IconPark в React?
Установите @iconify/react и отрисуйте <Icon icon="icon-park:add-one" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Иконки IconPark?
Иконки IconPark нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.