Безкоштовно · українською · 8 хв читання

Як намалювати іконки: сітка, лінії та експорт у SVG

Як намалювати набір іконок з нуля: сітка 24 × 24, ключові фігури, однакова товщина ліній, прив'язка до пікселів у Figma й експорт у SVG. П'ять кроків.

  • Намалюєте перший набір із шести іконок: від ескізу до SVG
  • Зрозумієте, чому іконки виглядають різнобійно, і виправите це
  • Налаштуєте Figma так, щоб лінії не розмивалися після експорту
Показати набір іконок
  • Безкоштовно
  • 1504 учасники
  • Вхід за 1 клік

Перший набір іконок: 5 кроків

  1. 1

    Крок 1

    Оберіть задачу й вивчіть, як роблять інші

  2. 2

    Крок 2

    Побудуйте сітку й ключові фігури

  3. 3

    Крок 3

    Домовтеся з собою про правила ліній

  4. 4

    Крок 4

    Малюйте у Figma з прив'язкою до пікселів

  5. 5

    Крок 5

    Експорт у SVG і перевірка набору

1504
учасники спільноти
8915
повідомлень із запитаннями з липня 2024
9
дизайн-ігор з вересня 2024
759
людей писали в чат

Цей гайд для вас, якщо ви

  • Малюєте першу іконку

    Хочете зрозуміти, з чого почати: який розмір, яка товщина ліній і як зробити, щоб іконка не розмивалася.

  • UI-дизайнер, якому бракує іконок

    У готових наборах немає потрібної іконки, і ви хочете домалювати свою так, щоб вона не випадала зі стилю.

  • Хочете набір у портфоліо

    Шукаєте вправу, яка показує увагу до деталей і системне мислення, а не лише гарну картинку.

Коротко

  • Інтерфейсну іконку малюють на сітці: у Material Design системні іконки мають розмір 24 × 24, а зміст розміщують у «живій зоні» 20 × 20.
  • Ключові фігури (коло, квадрат, прямокутники) допомагають зробити так, щоб різні за формою іконки виглядали однаково великими.
  • Одна товщина ліній, однакові радіуси кутів і однакові закінчення ліній на весь набір — головне, що робить іконки родиною.
  • У Figma увімкніть Pixel grid і Snap to pixel grid: лінії ляжуть на цілі пікселі й не розмиватимуться.
  • Перший проєкт — набір із шести іконок в одному стилі, експортований у SVG і перевірений поруч із текстом.

Перший набір іконок: 5 кроків

  1. 1

    Крок 1

    Оберіть задачу й вивчіть, як роблять інші

    Іконка — це не маленька ілюстрація, а знак, який людина має впізнати за долю секунди. Для першої вправи візьміть набір із шести системних іконок для вигаданого застосунку: дім, пошук, профіль, сповіщення, налаштування, вибране. Перед тим як малювати, подивіться, як побудовані великі системи:

    • Material Symbols від Google: усі іконки мають чотири змінні параметри — заповнення, товщину лінії, градацію й оптичний розмір; їх можна безкоштовно завантажити в SVG чи PNG за ліцензією Apache 2.0;
    • SF Symbols від Apple: символи мають дев'ять варіантів товщини й три масштаби та автоматично вирівнюються з текстом;
    • порівняйте одну й ту саму іконку (наприклад, «дім») у кількох наборах: що спільного і в чому різниця характеру.

    💡 Почніть з олівця: накидайте по три-чотири варіанти кожної іконки на папері. Перемагає не найдетальніший, а той, що впізнається з першого погляду.

  2. 2

    Крок 2

    Побудуйте сітку й ключові фігури

    Створіть у Figma фрейм 24 × 24 — базовий розмір системних іконок у Material Design. Зміст іконки тримайте в живій зоні 20 × 20 у центрі: по 2 пікселі з кожного боку лишаються вільними. Заходити в ці поля можна, лише якщо фігурі потрібна додаткова візуальна вага, а за межі фрейму — ніколи. Додайте ключові фігури — напівпрозорі напрямні, на які спиратимуться всі іконки:

    • квадрат 18 × 18;
    • коло діаметром 20;
    • вертикальний прямокутник 16 × 20 (ширина × висота);
    • горизонтальний прямокутник 20 × 16.

    💡 Чому коло більше за квадрат: при однакових розмірах коло здається меншим. Ключові фігури вже враховують цю оптичну поправку, тож «круглі» й «квадратні» іконки виглядатимуть однаково великими.

    Перевірте набір чужим оком

    У спільноті можна спитати про сітку, товщину ліній чи експорт у SVG і показати перший набір іконок на фідбек. Викладіть усі шість іконок в один рядок і спитайте, яка випадає.

    Показати набір іконок

    Безкоштовно. 1504 дизайнери вже в спільноті.

  3. 3

    Крок 3

    Домовтеся з собою про правила ліній

    Набір виглядає різнобійно, коли в іконок різна товщина ліній, кути й закінчення. Запишіть правила до того, як малювати, і тримайтеся їх у кожній іконці. Для орієнтиру — правила системних іконок Material Design і налаштування Figma:

    • товщина ліній 2 скрізь: у прямих, кривих, зовнішніх і внутрішніх контурах;
    • радіус зовнішніх кутів 2, внутрішні кути — прямі;
    • однакові закінчення ліній: у Figma їх задають у налаштуваннях обведення (None, Round, Square);
    • однакові з'єднання кутів: у Figma це Miter, Bevel або Rounded.

    💡 Material допускає оптичні поправки, коли деталі не вміщуються: наприклад, у скріпці й мікрофоні лінія тонша за 2. Але це виняток для складних форм, а не привід міняти товщину навмання.

  4. 4

    Крок 4

    Малюйте у Figma з прив'язкою до пікселів

    Відкрийте меню Zoom/view options і ввімкніть Pixel grid (Cmd + ' на macOS, Ctrl + ' на Windows) та Snap to pixel grid (Cmd + Shift + ' на macOS, Ctrl + Shift + ' на Windows): об'єкти прив'язуватимуться до цілих пікселів, і лінії не розмиватимуться після експорту. Сітку пікселів видно, коли масштаб 400% і більше. Потренуйтеся на іконці пошуку за туторіалом Figma:

    • інструментом Ellipse (O) з затиснутим Shift намалюйте коло 16 × 16, приберіть заливку й додайте обведення товщиною 2;
    • інструментом Pen (P) намалюйте ручку завдовжки 4 пікселі, товщина 2, закінчення Round;
    • виділіть обидві фігури й натисніть Union selection: так рамка об'єкта врахує обведення, і іконку можна точно вирівняти по центру фрейму, чого не дає звичайна група;
    • перетворіть кожну іконку на компонент, щоб набір було зручно використовувати в макетах.

    💡 Перевіряйте результат у режимі Pixel preview (Control + P на macOS, Ctrl + Alt + P на Windows): він показує, як іконка виглядатиме растром на звичайному екрані й на екрані з подвійною щільністю.

    Іконки розмиті чи різні на вигляд? Покажіть набір спільноті →
  5. 5

    Крок 5

    Експорт у SVG і перевірка набору

    Виділіть фрейм з іконкою, у розділі Export праворуч натисніть плюс, оберіть формат SVG і натисніть Export. Врахуйте особливість формату: SVG підтримує лише обведення по центру лінії, тож внутрішнє чи зовнішнє обведення Figma спростить при експорті. Вигляд іконки не зміниться, але код стане складнішим. Якщо потрібно, щоб лінії стали звичайними фігурами, оберіть Outline stroke у контекстному меню. Перед тим як вважати набір готовим, перевірте:

    • усі шість іконок поруч в одному рядку: однакова візуальна вага, жодна не «кричить»;
    • поруч із текстом кнопки чи пункту меню;
    • на світлому й темному тлі;
    • в інтерфейсі: місця для натискання навколо іконки 24 × 24 має бути 48 × 48 — так радить Material Design.

    💡 Покажіть набір у спільноті й попросіть фідбек на конкретне: впізнаваність, однаковість ваги чи окрему іконку, яка випадає зі стилю.

Ви не самі з цими питаннями

Ми порахували, про що найчастіше питають у нашій спільноті. Навчання, портфоліо й Figma — у трійці лідерів, а набір іконок у Figma закриває всі три теми одразу.

Ви не самі з цими питаннями
Навчання й курси938
Портфоліо та кейси705
Figma647
AI-інструменти380
Робота й вакансії314
UX-дослідження131

Повідомлення за темами в Spaceberry Community, липень 2024 — листопад 2026. Пошук за ключовими словами.

Практика з дедлайном і живим фідбеком

Найкраще вчить задача з терміном, яку бачать інші люди. Тому в спільноті регулярно проходять дизайн-ігри: однакове завдання для всіх, дедлайн і голосування.

  • Дизайн-гра · січень 2026

    Редизайн сайту НАОМА

    Головна сторінка академії очима абітурієнта, студента й викладача. Три роботи у фіналі, переможця обрала спільнота.

  • AI-челендж · травень 2025

    Лендинг, створений AI

    Логотип, тексти й візуали — тільки AI-інструментами. Чотири роботи, анонімне голосування, учасники поділилися промптами.

  • Воркшоп · квітень 2026

    Figmosha: AI у Figma

    Автор інструмента показав, як генерувати інтерфейси у Figma й аналізувати дизайн-систему.

Показати набір іконок

Безкоштовно. 1504 дизайнери вже в спільноті.

Як приєднатися — 1 хвилина

  1. 1

    Натисніть кнопку

    Відкриється Telegram зі спільнотою Spaceberry.

  2. 2

    Приєднайтеся

    Це безкоштовно: достатньо акаунта в Telegram.

  3. 3

    Представтеся

    Напишіть, з чого починаєте, і поставте перше питання.

Часті питання

Не знайшли відповіді? Поставте питання в спільноті — там відповідають.

У якій програмі малювати іконки?

Підійде будь-який векторний редактор. Для інтерфейсних іконок зручно працювати у Figma: на безкоштовному плані Starter є все потрібне для цього гайду — фрейми, вектори, прив'язка до пікселів і експорт у SVG. Якщо ви вже працюєте в Illustrator, принципи ті самі: сітка, ключові фігури й однакові лінії.

Який розмір іконок обрати?

Для інтерфейсу почніть із 24 × 24: це базовий розмір системних іконок у Material Design. Для щільних інтерфейсів на десктопі Material допускає 20 × 20 з живою зоною 16 × 16. Малюйте в масштабі 100%, а не великою картинкою, яку потім зменшуєте: так лінії лягають на цілі пікселі.

Чи можна брати готові іконки, а не малювати свої?

Так, і в робочих проєктах це часто правильне рішення. Перевіряйте ліцензію кожного набору: наприклад, Material Symbols поширюються за ліцензією Apache 2.0. Власні іконки потрібні, коли в наборі немає потрібного знака, і вони мають дотримуватися тих самих правил сітки й ліній.

Чим іконка відрізняється від логотипа?

Логотип має вирізняти бренд і бути унікальним. Системна іконка, навпаки, має бути впізнаваною й передбачуваною: лупа означає пошук у будь-якому застосунку. Тому в іконках важливіші правила й послідовність, а в логотипі — характер. Логотип можна малювати без сітки 24 × 24, а іконка в інтерфейсі має жити поруч з іншими іконками й текстом. Про логотипи — в окремому [гайді](/guides/logo-design).

Чи платна спільнота Spaceberry?

Ні, Spaceberry Community повністю безкоштовна. Її підтримує громадська організація Spaceberry Foundation, яка працює не для прибутку. Щоб приєднатися, достатньо акаунта в Telegram: натисніть кнопку на цій сторінці, представтеся й поставте перше питання. У спільноті 1504 дизайнери: вони діляться макетами, дають фідбек і беруть участь у дизайн-іграх з однаковим завданням для всіх.

Покажіть перший набір іконок спільноті

Приєднуйтеся до 1504 дизайнерів, які вчаться, діляться роботами й грають у дизайн-ігри. Покажіть свій набір іконок і отримайте фідбек.

Приєднатися безкоштовно
  • Безкоштовно
  • 1504 учасники
  • Вхід за 1 клік

Оновлено · Spaceberry Foundation

Джерела: