Створення іконок мобільного додатку

Створення іконок мобільного застосунку

Іконки в мобільному застосунку — не просто декор. Це функціональні елементи навігації та комунікації з користувачем. Погано нарисована іконка в tab bar — це користувач, який не розуміє, куди натискати. Іконка застосунку з неправильними розмірами — це відхилення від App Store на етапі сабміту.

App Icon: технічні вимоги платформ

App Store вимагає одного зображення 1024×1024px у PNG без альфа-каналу. Xcode генерує інші розміри через Asset Catalog — AppIcon.appiconset. На практиці до iOS 14 потрібно було 20+ розмірів, тепер Xcode 15+ приймає Single Size і робить масштабування автоматично. Все одно перевіряємо результат на фізичних пристроях: алгоритм масштабування іноді дає нечіткі краї на малих розмірах.

Google Play: 512×512px PNG для сторінки застосунку + адаптивна іконка для лаунчера. Адаптивна іконка — це два шари: foreground (108×108dp, зона контенту 72×72dp) та background. Android 13+ підтримує монохроматичну іконку (третій шар). Без адаптивної іконки на Android 8+ лаунчер може обрізати іконку по колу або квадрату, і логотип опиняється обрізаним.

Іконки інтерфейсу: SF Symbols vs кастом

На iOS у 2024 році за замовчуванням стали SF Symbols — системна бібліотека з 5000+ іконок, яка підтримує всі ваги шрифту (ultralight → black), multicolor, анімацію (iOS 17+). Якщо дизайн побудований на SF Symbols, розробка отримує це безплатно: масштаб, темізацію, доступність. Кастомні іконки потрібні тільки там, де SF Symbols не покриває.

На Android аналог — Material Symbols (раніше Material Icons). Ті ж принципи: variable font, weight та fill як параметри, не окремі файли.

Коли кастом необхідний: фірмові іконки, специфічні для домену (фінанси, медицина, e-commerce з нестандартними категоріями), іконки з унікальним стилем, який відрізняється від системного.

Формати експорту для розробника

• iOS/SwiftUI: PDF-вектор у Asset Catalog з Scales: Single Scale, Render As: Template Image для монохромних іконок або Original для кольорових
• Android: Vector Drawable XML (конвертується з SVG через Android Studio File → New → Vector Asset)
• React Native: SVG через react-native-svg + трансформація через SVGR у компоненти
• Flutter: SVG через пакет flutter_svg 2.x, або конвертація у flutter Icon через FlutterIcon.com

SVG повинен бути «чистим»: без зайвих груп, без трансформацій на кореневому елементі, без вбудованого bitmap. Перевіряємо у Figma перед експортом: Outline Stroke на всіх обводках, Flatten на складних булевих операціях.

Набір іконок для застосунку

Типовий набір для застосунку середної складності: 30–80 іконок. Tab bar (4–5 штук), toolbar actions (8–15), іконки категорій/типів контенту (10–30), системні (закрити, назад, поділитися, редагувати, видалити).

Всі іконки рисуємо в одній сітці (24×24 або 28×28pt) з однаковим візуальним вагою — оптичне вирівнювання, а не математичне. Кругла іконка повинна бути трохи більша за квадратну того ж розміру, щоб виглядати однаково.

Строк — 2–3 дні на повний набір іконок для середнестатистичного застосунку. Вартість розраховується індивідуально.