Екстрактор іконкових шрифтів
5 / 5Розберіть іконковий шрифт WOFF2, WOFF, TTF чи OTF на окремі SVG-іконки з назвами. Перегляньте кожен гліф, відновіть назви зі шрифту чи вашого CSS і завантажте окремі SVG-файли або SVG-спрайт.
Завантажте іконковий шрифт
WOFF2, WOFF, TTF чи OTF до 10 МБ. Додайте CSS або вставте URL шрифту, щоб отримати точніші назви.
WOFF2, WOFF, TTF чи OTF — до 10 МБ
Як працює екстрактор іконкових шрифтів
Перетворіть іконковий шрифт WOFF2, WOFF, TTF чи OTF на чисті SVG-іконки з назвами — окремими файлами або спрайтом, готовими до продакшну.
Будь-який іконковий шрифт
Завантажте WOFF2, WOFF, TTF чи OTF або вставте URL шрифту. Екстрактор декодує контур кожного гліфа просто зі шрифту — без втрати якості й без трасування.
Справжні назви, а не коди
Назви відновлюються зі шрифту (імена гліфів, лігатури), а якщо додати CSS — ще й з ваших класів на кшталт .icon-home. Тож ви отримаєте home.svg, а не icon-e900.svg.
Окремі SVG або спрайт
Завантажте кожну іконку окремим оптимізованим SVG (у ZIP) або один SVG-спрайт, де кожна іконка — окремий symbol. Обидва варіанти використовують currentColor, тож колір можна змінити в CSS.
Перенесення старих наборів іконок
Старий проєкт на іконковому шрифті, а вихідних SVG немає? Відновіть увесь набір як чисті SVG-файли з назвами — для спрайту, React/Vue-компонентів чи Figma.
Часті запитання
WOFF2, WOFF, TTF і OTF. Шрифт розбирається на сервері за допомогою fontTools, тож працюють навіть стиснені WOFF2. Також можна вставити пряме посилання на шрифт.
За пріоритетом: ваш CSS-клас (якщо додано CSS), лігатура шрифту, ім'я гліфа OpenType, назва в Unicode, а як запасний варіант — згенерована назва icon-XXXX.
Текстові шрифти — не набори іконок. За замовчуванням витягуються лише гліфи з Private Use Area (саме там живуть іконкові шрифти), тож зі звичайного шрифту вийде мало або нічого.
Так — кожна іконка є справжнім векторним контуром із viewBox і fill="currentColor". Відкрийте їх у SVG-редакторі, додайте в спрайт або імпортуйте у Figma як вектори.