Плоские цветные иконки — скачать SVG и PNG бесплатно
Плоские иконки (flat) — цветные рисунки из простых форм без обводок, градиентов и объёмных эффектов. У каждого набора своя палитра из нескольких цветов и одна тень на тон темнее, поэтому иконки выглядят как единая серия.
Плоский стиль выбирают для лендингов, презентаций, инфографики и учебных материалов, где иконка должна быть яркой и дружелюбной. Скачивание — SVG и PNG от 16 до 512 px, а также WebP и ICO.
Что такое плоские иконки
Flat-дизайн изображает предмет без имитации объёма: только залитые фигуры, без обводок, градиентов и размытых теней. Наши плоские иконки рисуются на сетке 64×64 из простых форм — кругов, скруглённых прямоугольников, плавных кривых. Главный цвет объекта — акцентный цвет палитры набора, всего в рисунке 3–5 цветов. Объём обозначает одна плоская тень: тон, затемнённый примерно на 15%, закрывает правую или нижнюю часть формы или лежит под предметом ровным эллипсом.
Палитра общая для всего набора, поэтому иконки одной серии можно ставить рядом в любом порядке — они не спорят по цвету.
Когда выбирать плоский стиль
Плоские иконки нужны там, где пиктограмма работает как маленькая иллюстрация: блок преимуществ на лендинге, шаги «как это работает», слайды, инфографика, раздаточные материалы для уроков. Цвет помогает различать пункты, а простые формы не отвлекают от текста.
Например, иконки еды и напитков оживят меню кафе или сайт доставки, погодные значки — виджет прогноза, а иконки денег и финансов — отчёт для инвесторов. Хорошо смотрятся в цвете и школьные и учебные иконки.
Flat, изометрия или 3D
Плоский стиль — самый лёгкий из цветных. Изометрические иконки показывают три грани предмета и лучше передают устройство склада, сервера или процесса, но требуют больше места. Объёмные 3D-иконки эффектнее всего, однако это растр: крупнее 1024 px их не увеличить без потерь, а цвет не поменять правкой кода. Flat остаётся вектором — SVG весит до 12 КБ и растягивается до любого размера. Для строгого монохромного интерфейса лучше подойдут линейные иконки.
Где использовать плоские иконки
| Задача | Размер | Совет |
|---|---|---|
| Блок преимуществ на лендинге | 48–96 px | Берите иконки одного набора, чтобы совпадала палитра |
| Слайды презентаций | 128–512 px | Три-четыре иконки на слайд, не больше |
| Инфографика и отчёты | 64–128 px | Свяжите цвет иконки с цветом графика |
| Уроки и раздаточные материалы | 64–256 px | Простые формы понятны детям и хорошо печатаются |
Практические советы
- Размер. Родной размер рисунка — 64 px; на экранах высокой плотности для такого блока берите PNG 128 px или SVG. Меньше 32 px детали и тень сливаются.
- Палитра. Не смешивайте на одном экране серии с разными палитрами: «Финансы Flat», «Еда Flat» и «Погода Flat» задуманы как самостоятельные наборы. Если цвета не совпадают с фирменными, замените их в перекраске SVG — инструмент находит все заливки файла.
- Фон. Плоской иконке нужен спокойный фон: белый, светло-серый или бледный оттенок основного цвета. На фото её лучше ставить на круглую подложку.
- Доступность. Цвет не должен быть единственным носителем смысла: подписывайте пункты текстом, а декоративные иконки скрывайте от скринридеров.
- Вес. Для сайта берите SVG, а PNG прогоните через сжатие PNG: картинка из нескольких цветов сжимается особенно хорошо.
Категории
Частые вопросы
- Чем плоские иконки отличаются от линейных?
- Линейные монохромные и состоят из контура, их цвет меняется в один клик. Плоские — цветные рисунки из залитых форм в палитре набора: они ярче и ближе к маленьким иллюстрациям.
- Можно ли перекрасить плоскую иконку?
- Быструю перекраску на странице получают монохромные иконки, а у плоских цвета заданы палитрой набора. Заменить отдельные цвета на фирменные можно в инструменте перекраски SVG — он показывает все цвета файла и меняет их прямо в браузере.
- Какой минимальный размер у flat-иконок?
- Рисунок создан на сетке 64×64 и лучше всего смотрится от 32 px. В 16–24 px мелкие детали и тень сливаются — для таких мест берите линейную или залитую версию.
- Подойдут ли плоские иконки для презентации?
- Да, это один из самых удобных вариантов: они яркие, но не перегружают слайд. Берите PNG 256 или 512 px, чтобы иконка оставалась чёткой на проекторе и большом экране.