Lets Icons
lets-icons · 1 528 иконок · автор: Leonid Tsvetkov · CC-BY-4.0 · одноцветные · сетка 24 px · Обновлено
Lets Icons — бесплатный набор иконок с открытым кодом: 1 528 SVG-иконок от Leonid Tsvetkov, выпущенный под лицензией CC BY 4.0. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Lets Icons
- контур и заливка
- монохромный
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | 19 × 19, отступ 2.5 |
| Стиль рисования | Сочетание контура и заливки |
| Толщина обводки | 2 |
| Концы линий | Плоские |
| Соединения линий | Острые |
| Радиус скругления | 1 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 57% горизонтальные или вертикальные, 10% под 45° |
| Кривые | 56% команд рисования |
| Симметрия | 51% иконок симметричны слева направо |
| Элементов на иконку | 2.3 |
| Команд рисования на иконку | 18 |
Измерено по 63 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Lets Icons by Leonid Tsvetkov, licensed under CC BY 4.0. https://creativecommons.org/licenses/by/4.0/
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Lets Icons" icon set (Iconify prefix "lets-icons") by Leonid Tsvetkov.
Style: mixed outline and fill, monochrome.
Iconify describes the set as: Has Padding, Uses Stroke.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">.
- Keep the drawing inside a 19x19 live area: about 2.5 units of padding on every side (never less than 1.4).
- A typical icon's bounding box covers 50% of the canvas.
Drawing
- Icons mix strokes and filled shapes (stroke 52%, mixed 29%, fill 19%).
- stroke-width="2" (widths used: 2 38%, 1 35%, 1.2 8%).
- stroke-linecap="butt", stroke-linejoin="miter".
- Round corners with a radius of about 1.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 57% horizontal or vertical, 10% at 45 degrees.
- About 56% of drawing commands are curves or arcs.
- Prefer left-right symmetric shapes (51% of icons are symmetric).
- Keep it simple: about 2 elements and 18 drawing commands per icon.
- Elements used by the set: path, g, circle, mask, defs, rect, ellipse.
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).
О наборе Lets Icons
Набор разделён на 44 категории, в том числе дизайн и разработка (113), магазин и e-commerce (96), закладки (87) и навигатор (76).
Популярные Lets Icons: search duotone line, view alt, message duotone, remote light, blank alt duotone и code.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Lets Icons выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.
Lets Icons по категориям
Иконки Дизайн и разработка (113)
Иконки Магазин и e-commerce (96)
Иконки Закладки (87)
Иконки Папки и файлы (74)
Иконки Стрелка (60)
Иконки Учёба (53)
Иконки Медиа (47)
Иконки Интерфейс (46)
Иконки Защита (45)
Иконки Социальная сеть (45)
Иконки Сообщение (44)
Как использовать Lets Icons
Все иконки на этой странице работают в любом фреймворке. В примерах используется lets-icons:search-duotone-line; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="lets-icons:search-duotone-line" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="lets-icons:search-duotone-line" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="lets-icons:search-duotone-line" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[lets-icons--search-duotone-line]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/lets-icons -->
<div class="i-lets-icons:search-duotone-line"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="lets-icons:search-duotone-line"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/lets-icons/search-duotone-line.svg" alt="Иконка Search Duotone Line" width="24" height="24">Вопросы и ответы: Lets Icons
Можно ли бесплатно использовать Lets Icons в коммерческих проектах?
Да. Lets Icons выпущены под лицензией CC BY 4.0, которая разрешает использование в личных и коммерческих проектах при условии указания автора.
Сколько иконок в наборе Lets Icons?
В наборе Lets Icons 1 528 иконок в 44 категориях.
Какая лицензия у набора Lets Icons?
Lets Icons распространяются по лицензии CC BY 4.0. Полный текст лицензии доступен по адресу https://creativecommons.org/licenses/by/4.0/.
Кто создал Lets Icons?
Автор набора Lets Icons — Leonid Tsvetkov.
Как использовать Lets Icons в React?
Установите @iconify/react и отрисуйте <Icon icon="lets-icons:search-duotone-line" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Lets Icons?
Lets Icons нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.