Иконки Fontisto
fontisto · 615 иконок · автор: Kenan Gündoğan · MIT · одноцветные · сетка 24 px · Обновлено
Иконки Fontisto — бесплатный набор иконок с открытым кодом: 615 SVG-иконок от Kenan Gündoğan, выпущенный под лицензией MIT. Иконки одноцветные: они наследуют цвет текста (currentColor), и их цвет можно менять через CSS. Они нарисованы по сетке 24 px и чётко масштабируются как SVG.
Дизайн-спецификация: Иконки Fontisto
- залитый
- монохромный
Правила рисования этого набора, измеренные по его SVG-файлам. Используйте их, чтобы создавать новые иконки в том же стиле.
| Холст | 24 × 24 · 41% иконок |
|---|---|
| viewBox | 0 0 24 24 |
| Область рисования | Весь холст, без отступов |
| Стиль рисования | Залитые фигуры |
| Радиус скругления | 0.5 |
| Цвета | Один цвет (currentColor), меняется через CSS |
| Координаты | До 3 знаков после запятой |
| Прямые линии | 61% горизонтальные или вертикальные, 9% под 45° |
| Кривые | 43% команд рисования |
| Симметрия | 23% иконок симметричны слева направо |
| Элементов на иконку | 1.3 |
| Команд рисования на иконку | 56 |
Измерено по 64 иконкам набора.
Генерация иконок с помощью ИИ
Лицензия разрешает создавать новые иконки на основе этого набора.
- Укажите авторов оригинала.
Строка атрибуции: Based on Fontisto by Kenan Gündoğan, licensed under MIT. https://github.com/kenangundogan/fontisto/blob/master/LICENSE
Стайлгайд для промпта LLM (на английском)
Вставьте его в промпт вместе с несколькими иконками из набора и укажите, какую иконку нужно нарисовать.
You draw new icons for the "Fontisto" icon set (Iconify prefix "fontisto") by Kenan Gündoğan.
Style: filled, solid, monochrome.
Iconify describes the set as: Precise Shapes.
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 100% of the canvas.
Drawing
- Filled icons: draw closed filled shapes; don't use strokes.
- Round corners with a radius of about 0.5.
Geometry
- Coordinates are free-form; write at most 3 decimals.
- Straight lines: 61% horizontal or vertical, 9% at 45 degrees.
- About 43% of drawing commands are curves or arcs.
- Keep it simple: about 1 element and 56 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).
О наборе Иконки Fontisto
Набор разделён на 23 категории, в том числе бренд (179), интерфейсы (117), редактор (40) и медицина (31).
Популярные Иконки Fontisto: prescription, heartbeat alt, rain, navigate, filter и home.
Откройте любую иконку, чтобы скопировать её как SVG, JSX, Vue, Svelte, Solid, Astro или CSS или скачать в SVG или PNG. Иконки Fontisto выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Примечание: авторы больше не поддерживают этот набор активно.
Иконки Fontisto по категориям
Иконки Бренд (179)
Иконки Интерфейсы (117)
Иконки Редактор (40)
Иконки Медицина (31)
Иконки Путешествия (30)
Иконки Погода (30)
Иконки Направления (28)
Иконки Плеер (25)
Иконки Эмодзи (20)
Иконки Транспорт (15)
Иконки Пол (14)
Иконки Оплата (14)
Как использовать Иконки Fontisto
Все иконки на этой странице работают в любом фреймворке. В примерах используется fontisto:prescription; откройте иконку, чтобы скопировать её код в SVG, JSX, Vue, Svelte, Solid, Astro или CSS. Советы по размеру, цвету и доступности — в руководстве как использовать SVG-иконки.
React
import { Icon } from "@iconify/react";
<Icon icon="fontisto:prescription" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fontisto:prescription" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fontisto:prescription" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fontisto--prescription]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fontisto -->
<div class="i-fontisto:prescription"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fontisto:prescription"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/fontisto/prescription.svg" alt="Иконка Prescription" width="24" height="24">Вопросы и ответы: Иконки Fontisto
Можно ли бесплатно использовать Иконки Fontisto в коммерческих проектах?
Да. Иконки Fontisto выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Сколько иконок в наборе Иконки Fontisto?
В наборе Иконки Fontisto 615 иконок в 23 категориях.
Какая лицензия у набора Иконки Fontisto?
Иконки Fontisto распространяются по лицензии MIT. Полный текст лицензии доступен по адресу https://github.com/kenangundogan/fontisto/blob/master/LICENSE.
Кто создал Иконки Fontisto?
Автор набора Иконки Fontisto — Kenan Gündoğan.
Как использовать Иконки Fontisto в React?
Установите @iconify/react и отрисуйте <Icon icon="fontisto:prescription" /> или откройте любую иконку на этой странице и скопируйте её как отдельный React-компонент.
Какого размера Иконки Fontisto?
Иконки Fontisto нарисованы по сетке 24 px. Как SVG они масштабируются до любого размера без потери качества.