Qlementine Icons
qlementine-icons · 905 иконок · автор: Olivier Cléro · MIT · одноцветные · Обновлено
Qlementine Icons — бесплатный набор иконок с открытым кодом: 905 SVG-иконок от Olivier Cléro, выпущенный под лицензией MIT. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS.
Дизайн-спецификация: Qlementine Icons
- залитый
- монохромный
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | Весь холст, без отступов |
| Стиль рисования | Залитые фигуры |
| Радиус скругления | 0.5 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 71% горизонтальные или вертикальные, 12% под 45° |
| Кривые | 65% команд рисования |
| Симметрия | 26% иконок симметричны слева направо |
| Элементов на иконку | 1.6 |
| Команд рисования на иконку | 48 |
Измерено по 61 иконке набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Qlementine Icons by Olivier Cléro, licensed under MIT. https://github.com/oclero/qlementine-icons/blob/master/LICENSE
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Qlementine Icons" icon set (Iconify prefix "qlementine-icons") by Olivier Cléro.
Style: filled, solid, monochrome.
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 39% of the canvas.
Drawing
- Filled icons: draw closed filled shapes; don't use strokes.
- Use fill-rule="evenodd" for holes.
- Round corners with a radius of about 0.5.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 71% horizontal or vertical, 12% at 45 degrees.
- About 65% of drawing commands are curves or arcs.
- Keep it simple: about 2 elements and 48 drawing commands per icon.
- Elements used by the set: path.
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).
О наборе Qlementine Icons
Набор разделён на 17 категорий, в том числе действие (180), разное (168), навигация (121) и инструменты (87).
Популярные Qlementine Icons: windows 16, check tick small 16, speaker 0 16, play 16, triangle filled 16 и folder filled 16.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Qlementine Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Qlementine Icons по категориям
Иконки Действие (180)
Иконки Разное (168)
Иконки Инструменты (87)
Иконки Оборудование (58)
Иконки Бренд (57)
Иконки Фигура (47)
Иконки Медиа (35)
Иконки Файл (34)
Иконки Текст (28)
Иконки Страница (22)
Иконки Аудио (15)
Как использовать Qlementine Icons
Все иконки на этой странице работают в любом фреймворке. В примерах используется qlementine-icons:windows-16; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="qlementine-icons:windows-16" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="qlementine-icons:windows-16" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="qlementine-icons:windows-16" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[qlementine-icons--windows-16]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/qlementine-icons -->
<div class="i-qlementine-icons:windows-16"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="qlementine-icons:windows-16"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/qlementine-icons/windows-16.svg" alt="Иконка Windows 16" width="24" height="24">Вопросы и ответы: Qlementine Icons
Можно ли бесплатно использовать Qlementine Icons в коммерческих проектах?
Да. Qlementine Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Qlementine Icons?
В наборе Qlementine Icons 905 иконок в 17 категориях.
Какая лицензия у набора Qlementine Icons?
Qlementine Icons распространяются по лицензии MIT. Полный текст лицензии доступен по адресу https://github.com/oclero/qlementine-icons/blob/master/LICENSE.
Кто создал Qlementine Icons?
Автор набора Qlementine Icons — Olivier Cléro.
Как использовать Qlementine Icons в React?
Установите @iconify/react и отрисуйте <Icon icon="qlementine-icons:windows-16" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.