3D-иконки (3д) — скачать PNG и WebP бесплатно

Каждую можно скачать в трёх размерах — 256, 512 и 1024 px — и сразу вставить на слайд презентации, в первый экран лендинга, макет в Figma, баннер или карточку товара. Иконки собственные, бесплатны для коммерческих проектов и не требуют указания автора. Ниже — какой размер брать под разные задачи и как вставлять объёмные картинки, чтобы страница не стала тяжёлой.

3D-иконки как готовые файлы

Здесь собраны все 3D-иконки каталога в виде файлов для скачивания. Каждая — отрисованная объёмная сцена: предмет занимает около 80% квадратного кадра, стоит по центру, а фон полностью прозрачный. Скачать можно:

• PNG 256, 512 и 1024 px с альфа-каналом — для любых редакторов и документов;
• WebP тех же размеров — более лёгкий вариант для сайтов.

Меньшие размеры получены уменьшением исходного рендера 1024 px, поэтому края у них чистые, без ступенек. Про сам визуальный стиль — материалы, свет и сочетание с плоским интерфейсом — рассказано на странице стиля 3D.

Где 3D-иконки работают лучше всего

Объёмная картинка заметнее плоской, поэтому её ставят туда, где нужно зацепить взгляд:

• Презентации. Крупная иконка на титульном слайде или разделителе заменяет стоковую фотографию.
• Лендинги. Первый экран, блоки преимуществ, тарифы, пустые состояния в веб-приложении.
• Маркетплейсы. Инфографика на карточке товара: значки выгод — доставка, гарантия, подарок — поверх фото или на цветной плашке.
• Соцсети и рассылки. Обложки постов, анонсы акций, баннеры в письмах.

Под эти задачи подходят финансовые иконки — монеты, копилка, диаграммы, — значки покупок и скидок для магазинов, символы уведомлений и сообщений для приложений, праздничные мотивы для поздравлений и кнопки и символы интерфейса для лендингов. Готовые серии — набор «Интерфейс 3D» и «Бизнес 3D».

3D PNG или векторная иконка

Объёмная картинка выигрывает в эффектности, но уступает вектору в гибкости: её предел — 1024 px, а цвета зафиксированы при рендере. Когда иконок на экране десяток или они мельче 64 px, берите плоские или изометрические иконки в SVG: они легче и не теряют чёткость. 3D оставьте для крупных акцентов.

Какой размер 3D-иконки выбрать

Как вставлять 3D-иконки без потери скорости

• WebP для сайта. При той же картинке WebP заметно легче PNG — это прямая экономия трафика на мобильных.
• Размер под место показа. Иконка, показанная в 128 px, не должна весить как 1024 px: для обычных экранов подойдёт 256 px, для экранов высокой плотности добавьте 512 px через srcset.
• Ленивая загрузка. Иконкам ниже первого экрана ставьте loading="lazy", а у иконки на первом экране указывайте width и height, чтобы вёрстка не сдвигалась.
• Сжатие. PNG перед публикацией прогоните через сжатие PNG, а после квантования проверьте на глаз плавные переходы цвета.
• Стикеры. Из 3D-иконки получается выразительный стикер для мессенджера — конвертер в стикер подгонит её под 512×512 в WebP.