Flowbite Icons
flowbite · 751 иконка · автор: Themesberg · MIT · одноцветные · сетка 24 px · Обновлено
Flowbite Icons — бесплатный набор иконок с открытым кодом: 751 SVG-иконка от Themesberg, выпущенный под лицензией MIT. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Flowbite Icons
- контур и заливка
- монохромный
- скруглённый
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | 18.9 × 18.9, отступ 2.55 |
| Стиль рисования | Сочетание контура и заливки |
| Толщина обводки | 2 |
| Концы линий | Скруглённые |
| Соединения линий | Скруглённые |
| Радиус скругления | 1 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 65% горизонтальные или вертикальные, 9% под 45° |
| Кривые | 49% команд рисования |
| Симметрия | 37% иконок симметричны слева направо |
| Элементов на иконку | 1.2 |
| Команд рисования на иконку | 18 |
Измерено по 63 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Flowbite Icons by Themesberg, licensed under MIT. https://github.com/themesberg/flowbite-icons/blob/main/LICENSE
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Flowbite Icons" icon set (Iconify prefix "flowbite") by Themesberg.
Style: mixed outline and fill, monochrome, rounded.
Iconify describes the set as: Uses Stroke.
Canvas
- Root: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">.
- Keep the drawing inside a 18.9x18.9 live area: about 2.55 units of padding on every side (never less than 2).
- A typical icon's bounding box covers 56% of the canvas.
Drawing
- Icons mix strokes and filled shapes (fill 52%, stroke 46%, mixed 2%).
- stroke-width="2" (widths used: 2 48%, 1 2%).
- stroke-linecap="round", stroke-linejoin="round".
- Use fill-rule="evenodd" for holes.
- Round corners with a radius of about 1.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 65% horizontal or vertical, 9% at 45 degrees.
- About 49% of drawing commands are curves or arcs.
- Keep it simple: about 1 element and 18 drawing commands per icon.
- Elements used by the set: path, g, rect.
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).
О наборе Flowbite Icons
Набор разделён на 12 категорий, в том числе общее (307), еда и напитки (97), файлы и папки (70) и стрелки (54).
Популярные Flowbite Icons: user outline, vue solid, list outline, bars from left outline, letter underline outline и table column solid.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Flowbite Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Flowbite Icons по категориям
Иконки Общее (307)
Иконки Еда и напитки (97)
Иконки Файлы и папки (70)
Иконки Стрелки (54)
Иконки Образование (46)
Иконки Медиа (45)
Иконки Электронная коммерция (36)
Иконки Бренды (30)
Иконки Текст (28)
Иконки Пользователь (20)
Иконки Эмодзи (12)
Иконки Погода (6)
Как использовать Flowbite Icons
Все иконки на этой странице работают в любом фреймворке. В примерах используется flowbite:user-outline; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="flowbite:user-outline" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="flowbite:user-outline" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="flowbite:user-outline" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[flowbite--user-outline]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/flowbite -->
<div class="i-flowbite:user-outline"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="flowbite:user-outline"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/flowbite/user-outline.svg" alt="Иконка User Outline" width="24" height="24">Вопросы и ответы: Flowbite Icons
Можно ли бесплатно использовать Flowbite Icons в коммерческих проектах?
Да. Flowbite Icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Flowbite Icons?
В наборе Flowbite Icons 751 иконка в 12 категориях.
Какая лицензия у набора Flowbite Icons?
Flowbite Icons распространяются по лицензии MIT. Полный текст лицензии доступен по адресу https://github.com/themesberg/flowbite-icons/blob/main/LICENSE.
Кто создал Flowbite Icons?
Автор набора Flowbite Icons — Themesberg.
Как использовать Flowbite Icons в React?
Установите @iconify/react и отрисуйте <Icon icon="flowbite:user-outline" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Flowbite Icons?
Flowbite Icons нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.