Пиксельные иконки — скачать PNG и SVG бесплатно
Пиксельные иконки нарисованы по клеточкам, как графика старых игровых приставок: сетка 16×16, палитра до 8 цветов и никакого сглаживания.
Стиль 8-bit сразу задаёт настроение — ретро, игра, лёгкая ирония — и поэтому хорош для игровых проектов, тематических лендингов, стримов, мерча и праздничных акций. Пиксельные иконки доступны в SVG с чёткими краями и в PNG от 16 до 512 px.
Что такое пиксельные иконки
Пиксель-арт — графика из видимых квадратных точек. Наши пиксельные иконки рисуются на сетке 16×16, где одна клетка — один пиксель, а SVG состоит только из прямоугольников с целыми координатами. Палитра набора — до 8 цветов; обводок, прозрачности и сглаживания нет. Контур обычно тёмный, толщиной в одну клетку, внутри — один-два тона и блик, диагонали выстроены «лесенкой» без случайных одиночных точек.
В SVG включён режим crispEdges: браузер не размывает границы клеток, так что векторную версию можно увеличить хоть до размера плаката.
Когда выбирать стиль 8-bit
Пиксельные иконки — выбор с характером. Они уместны, когда проекту нужна игровая или ностальгическая интонация:
- интерфейсы игр, лаунчеры, страницы турниров и игровых клубов;
- оформление стримов, оверлеи, значки для чата сообщества;
- промо-страницы, конкурсы, «пасхалки» и страницы ошибки 404;
- мерч, стикеры, открытки и приглашения в ретро-духе.
В пиксельном исполнении особенно выразительны базовые иконки интерфейса — сердечко, звезда, галочка, — праздничные мотивы для акций, медиа-иконки для плеера и значки погоды для игровых карт. Готовая серия — набор «Ретро-пиксели».
Пиксельные иконки и другие стили
От плоских иконок пиксельные отличаются тем, что в них нет плавных линий: даже круг состоит из ступенек. Это ограничение и есть стиль, поэтому пиксель-арт плохо смешивается с гладкой графикой — в одном блоке лучше держать только его. Рядом хорошо смотрятся пиксельный или моноширинный шрифт и контрастные плашки. Если тема та же, а ретро-настроение не нужно, возьмите плоские цветные иконки или строгий линейный «Интерфейс UI».
Где использовать пиксельные иконки
| Проект | Размер | На что обратить внимание |
|---|---|---|
| Игровой интерфейс и инвентарь | 32–64 px | Кратность 16 сохраняет ровные пиксели |
| Favicon и значки вкладок | 16 px | Рисунок совпадает с сеткой один в один |
| Оверлеи и значки стримов | 48–128 px | Тёмный контур читается поверх видео |
| Стикеры, мерч и печать | 512 px или SVG | Для печати берите вектор |
Практические советы
- Только целые масштабы. Размеры 16, 32, 48, 64, 128, 256 и 512 px кратны сетке, 24 px — нет. В вёрстке задавайте размер в пикселях, а не в процентах от контейнера.
- Без сглаживания. Для PNG добавьте в CSS
image-rendering: pixelated. Размытие, мягкие тени и скругления рамок разрушают стиль. - Контраст. Палитра яркая, но светлые детали на белом фоне теряют контур. Тёмный фон — родная среда пиксель-арта.
- Favicon за минуту. Иконка 16×16 переходит в ICO без потерь, а генератор favicon выдаст и файл, и HTML-код для сайта.
- Большие размеры. Для обложки или печати крупнее 512 px сделайте растр 1024 или 2048 px в конвертере SVG в PNG — кратность сохранится, края останутся резкими.
Категории
Частые вопросы
- В каком размере скачивать пиксельную иконку?
- В размере, кратном 16: 16, 32, 48, 64, 128, 256 или 512 px. Тогда каждый пиксель рисунка становится ровным квадратом 1×1, 2×2, 3×3 и так далее. В 24 px одни клетки получат ширину в 1 пиксель, другие — в 2, и рисунок исказится.
- Почему пиксельная иконка размывается на сайте?
- Браузер сглаживает растровую картинку, когда растягивает её. Добавьте к PNG CSS-свойство image-rendering: pixelated или используйте SVG — в наших файлах уже включён режим crispEdges, и края остаются резкими.
- Можно ли сделать из 8-bit иконки favicon?
- Да, это почти идеальный вариант: рисунок 16×16 совпадает с размером вкладки пиксель в пиксель. Готовый ICO лежит среди форматов иконки, а файлы для мобильных платформ и HTML-код подготовит генератор favicon.
- Можно ли перекрасить пиксельную иконку?
- Каждый цвет здесь — часть палитры набора, поэтому быстрая перекраска на странице для этого стиля не предусмотрена. Отдельные цвета можно заменить в SVG-коде: рисунок состоит из простых прямоугольников с HEX-заливкой.