Иконки для сайта png: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

html — Где брать svg, png иконки и как их использовать для разных разрешений экрана?

Вопрос задан 2 года 3 месяца назад

Изменён 2 года 3 месяца назад

Просмотрен 420 раз

Не могу найти иконку в svg, решаю добавлять ее через обычное png. Хочу сделать так, чтоб вне зависимости от разрешения экрана все смотрелось хорошо.

Вопрос: где именно искать версии картинок в 2x, 3x? Их дизайнер сам добавляет в макет? Или это ищешь самостоятельно?

• html
• css
• svg
• img

5

где именно искать версии картинок в 2x, 3x? Их дизайнер сам добавляет в макет? Или это ищешь самостоятельно?

PNG иконки

Если это иконки png, то достаточно много пакетов иконок в сети, где включены несколько папок с размерами 32. 64, 128, 256px

Если нужно, свою, родную иконку в нескольких вариантах размеров, то можно в Photoshop или в другом растровом редакторе сделать это. Буквально в несколько кликов, — нужно только выставить в меню изменения размеров требуемые цифры.

SVG иконки

Сначала ссылки на ресурсы, где достаточно много иконок и изображений SVG

1. http://thenewcode.com/assets/svg/

2. http://svg-whiz.com/svg/

3. https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/

4. https://twemoji.maxcdn.com/svg/1f698.svg

В п.4 нет открытого каталога со списком иконок, но их можно посмотреть и скачать, если в браузерной строке поиска подставлять цифры с 300 до 699

https://twemoji.maxcdn.com/svg/1f301.svg

Пример, как использовать одну и ту же иконку с разными выводимыми размерами

Допустим вы скачали иконку андроида

Код иконки:

<svg xmlns="http://www.
  w3.org/2000/svg" viewBox="0 0 96 105">
  <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h49v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
</svg>

Необходимо её немного доработать:

1.Обернуть код в тег <symbol>

2. И далее, ей можно многократно использовать, вызывая командой

   <use>

       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105" >
         <symbol viewBox="0 0 96 105"> 
        <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
           <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h49v-31z" stroke-width="12"/>
           <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
         </g>
         <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
         <g fill="#FFF">
           <circle cx="36" cy="22" r="2"/>
           <circle cx="59" cy="22" r="2"/>
         </g>
         </symbol> 
           
        <use xlink:href="#icon" x="0"  /> 
           <use xlink:href="#icon" x="25" />
             <use xlink:href="#icon" x="42 " /> 
               <use xlink:href="#icon" x="52" />
       </svg> 

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Лучшие Сайты Для Загрузки Бесплатных Иконок

Иконка — маленький, но важный элемент дизайна, который поможет отличить сайт или приложение от других и выгодно выделиться в огромной сети. Можно попросить нарисовать иконку дизайнера, а можно воспользоваться одним из бесплатных сервисов, которых в интернете огромное множество. Рассказываем о том, где можно скачать бесплатные иконки. 

Лучшие сайты для загрузки бесплатных иконок

Иконка — маленький, но важный элемент дизайна, который поможет отличить сайт или приложение от других и выгодно выделиться в огромной сети. Можно попросить нарисовать иконку дизайнера, а можно воспользоваться одним из бесплатных сервисов, которых в интернете огромное множество. Рассказываем о том, где можно скачать бесплатные иконки. 

FlatIcon — 4476000+ Бесплатные векторные иконки в форматах SVG, PSD, PNG, EPS

Это сайт, на котором есть как бесплатные иконки, так и платные. Это крупнейшая в русскоязычном интернете база иконок, которые доступны в разных форматах: PNG, SVG, PSD и прочих.

На этой своеобразной бирже можно продавать свой контент, если вы дизайнер, а также искать по тематикам, скачивать иконки целыми пакетами. Среди популярных запросов — иконки с флагами разных стран, логотипы социальных сетей, иконки с деревьями и другими экологическими символами, символика врачей.

Для входа необходим аккаунт в Google или Facebook, но авторизоваться для скачивания не обязательно, бесплатные иконки в любом из форматов можно скачать и так. 

4476000+ Бесплатные векторные иконки в форматах SVG, PSD, PNG, EPS

4476000+ Бесплатные векторные иконки в форматах SVG, PSD, PNG, EPS

Freepik: бесплатные векторы, фотографии и PSD загрузка

Freepik - это большой запас качественных векторных изображений, фотографий, значков веб -сайтов и шаблонов PSD. Это возможность найти и скачать потрясающие значки для ваших проектов.

Значительным преимуществом является то, что сайт можно использовать бесплатно. Основные ограничения бесплатной версии составляют не более 30 загрузок в день, и необходимость предоставить ссылку на автора изображения, но есть также платные версии, после покупки, которые будут расширены.

Сайт, на котором много бесплатных стоковых фотографий, векторных изображений и иконок. Подходят и для личного, и для коммерческого использования. Здесь они есть в формате AI, EPS и SVG формате.

Войти на сайт можно с аккаунтом Google и Facebook, точно так же, как и на FlatIcon. Сайты дружественные, и связаны в одну сеть. Этот агрегатор бесплатных стоковых иконок представляет в основном чёрно-белые варианты для универсального использования. 

Freepik: бесплатные векторы, фотографии и PSD загрузка

Freepik: бесплатные векторы, фотографии и PSD загрузка

Icons8 бесплатных векторных иконок — Скачать 170800 иконок (SVG, PNG)

На этом сайте не только бесплатные иконки, но и иллюстрации, фото, музыка и приложения для дизайна. Кроме самого сайта, где можно найти иконки в PNG и SVG, есть офлайн-приложение с иконками, которое можно скачать. Поиск производится по разным критериям: «эстетичные» иконки, анимированные, иконки с эмоджи, и специальные иконки для iOS.

Как и на многих сайтах, здесь есть бесплатные варианты для скачивания, и платная версия. У сайта есть русскоязычная и англоязычные версии — для регистрации нужны Google, Microsoft или Facebook аккаунты. 

Icons8 бесплатных векторных иконок — Скачать 170800 иконок (SVG, PNG)

Icons8 бесплатных векторных иконок — Скачать 170800 иконок (SVG, PNG)

Font Awesome — самый популярный и простой в использовании набор иконок в мире.

Бесплатный англоязычный сайт, на котором очень много векторных изображений. На данный момент у сайта есть так называемая «Альфа-версия», которая обещает пользователям доступ к большему количеству контента, в том числе стилей, иконок и услуг.

Кроме этого, на сайте есть возможность бесплатно скачивать иконки или зарегистрировать Pro аккаунт. Более 1500 бесплатных иконок доступны для скачивания. 

Font Awesome — самый популярный и простой в использовании набор иконок в мире.

Шпаргалка по Font Awesome: список значков FontAwesome

Font Awesome — самый популярный и простой в использовании набор иконок в мире.

В заключении

На самом деле, сайтов для бесплатных иконок, которые можно скачать, огромное множество. Везде есть бесплатные варианты и подобрать иконки из них можно практически для любой задачи. После скачивания можно менять цвет и другие характеристики иконки. Таким образом можно сделать уникальную иконку, которая будет отличать сайт или приложение от конкурентов. 

бесплатные иконки скачать , FontAwesome все иконки, Font Awesome бесплатные иконки, бесплатные иконки, Freepik бесплатные иконки, Icons8 бесплатные иконки

Web Icon PNG Images, Vectors Free Download — Pngtree

• vector web icon

• vector web icon

• website symbol web icon vector isolated

  4000*4000

• vector web icon

  1199 *1199

• веб-иконка

• иконка всемирной паутины для вашего проекта0005

  1299*1299

• Дизайн веб -значков

  5120*5120

• Дизайн веб -значков

• Вектор веб -ICON

• Vect

• значок веб-браузера со значком стиля линии векторная иллюстрация интернет-программное обеспечение

• красный градиент значок интернет-символа

• векторный значок веб-поиска

  1199*1199

• internet on laptop web icon flat line filled gray icon vector

• vector webpage icon

• vector web search icon

• vector web page icon

• gold balloons happy день рождения на блестках золотой шар праздник фон для вас логотип карты баннер веб-дизайн день рождения и новый год белый

• горячая распродажа скорость стиль веб скидка предложение баннер с магазин теперь пустая кнопка бесплатный вектор и png

• социальные сети instagram цветной стиль горячая распродажа скорость баннер текстовое поле скидка веб-кнопка

• горячая распродажа скорость стиль текстовое поле веб-скидка предложение баннер желтый и синий

• 3 шага инфографика 3d лента этикетка с заголовком теневого веб-элемента текстовое поле баннер

• инфографика 3d лента этикетка с тенью вектор дизайн веб-элемент форма заголовок текстовое поле баннер cdr

• паутина украшение на Хэллоуин

  3000*3000

• 3D ленточная метка с теневым вектором дизайна веб -элемента боковой шарнирной бокс Баннер Инфографический CDR

• Веб -вактерный вактерный ватеркорел Halloween

  3000*3000

• 9

  Halloween.

• концепция цифрового маркетинга с людьми, помещающими изображения контента на экран веб-приборной панели, поисковая оптимизация, продвижение рабочего процесса и командная работа в плоском стиле, векторная иллюстрация

• черный qr-код для веб-сайта

• скоростной стиль распродажа и скидка предложение баннер для веб-сайта

• современный плоский дизайн концепция командной работы дизайн с персонажами на встречах и презентациях может использоваться для бизнес-маркетинга контент-стратегия целевой страницы веб-дизайн плоская векторная иллюстрация

• угол висит реалистичная паутина

• социальная сеть красная кнопка

• горячая распродажа скорость стиль веб скидка предложение баннер с магазином теперь пустая кнопка

• концепция плоского дизайна программистов на работе разработка программного обеспечения для мобильных приложений с персонажами может использоваться для веб-баннера бизнес-анализ целевой страницы шаблон веб-сайта векторная иллюстрация

• современная концепция плоского дизайна маркетинга в социальных сетях может использоваться для анализа стратегии бизнес-контента мобильный целевая страница приложения веб-дизайн шаблон плоская векторная иллюстрация

• желтый и синий пустой бизнес геометрический продажа социальные медиа веб-баннер флаер facebook обложка фото дизайн

• окно поиска в Интернете окно поиска в Интернете увеличительное стекло gif анимация мультфильм

• 3 шага инфографика 3d лента этикетка с тенью веб-элемент заголовок текстовое поле баннер клипарт

  1500*1500

• 0 белый

• веб-разработчик изометрическая иллюстрация

• горячая распродажа скорость стиль веб скидка предложение баннер с магазином теперь пустая кнопка бесплатный вектор и png

• векторный значок веб-сервера

• красная паутина

• интерфейс видеоплеера прямая трансляция в Интернете youtube classic

• современная плоская концепция дизайна цифрового маркетинга с гигантским мегафоном и персонажами, которые можно использовать для веб-контента, стратегии, инфографики, целевой страницы, веб шаблон плоской векторной иллюстрации

• современная плоская концепция дизайна программистов на работе концепция разработки программного обеспечения с персонажами можно использовать для веб-бизнес-анализа целевой страницы шаблон веб-сайта плоская векторная иллюстрация

• теперь доступно этикетка баннер для интернет-магазина и приложения

  1200 * 1200

• концепция программирования программного обеспечения в 3d изометрическом наброске дизайн команда разработчиков программы тестирует и оптимизирует компьютерные работы офисная линия веб-шаблон векторная иллюстрация с людьми сцена

• белая висящая реалистичная паутина

• да и нет значки веб-кнопки

• концепция программирования в 3d изометрическом наброске дизайн разработчик работает с кодированием кода java и python пишет скрипты разрабатывает программное обеспечение линия веб-шаблон векторная иллюстрация люди сцена

• бизнес-цель веб-концепция бизнесмен пробегает столбец за столбцом к цели для достижения успеха партнерство лидерство успешная командная работа плоская векторная иллюстрация

• pti tehreek e insaf урду текст шрифт имран хан пакистан политическая партия веб-баннер

• белый Хэллоуин паутина элемент украшения

• интерфейс шаблона видеоплеер youtube прямая трансляция веб-подписка на канал

• современный плоский дизайн концепция командной работы дизайн с персонажами на встрече и презентации может использоваться для бизнес-маркетинговой стратегии контента целевой страницы веб-дизайна плоской векторной иллюстрации чтение книги и подготовка к экзаменам линия веб-шаблон векторная иллюстрация с сценой людей

• концепция искусственного интеллекта в 3d изометрической схеме дизайн ученый инженер работающий с ИИ и обучающий робот мозг машинное обучение линия веб-шаблон векторная иллюстрация люди сцена 9веерообразная реалистичная белая паутина twitch overlay face cam веб-камера потоковая трансляция

• pti веб-баннер tehreek e insaf imran khan пакистанская политическая партия

• концепция кибербезопасности в трехмерном изометрическом дизайне контура пользователь использует безопасный доступ для входа в систему и аутентификацию по отпечаткам пальцев линия защиты данных в Интернете веб-шаблон векторная иллюстрация с сценой людей продукт или услуги можно использовать для векторной иллюстрации целевой веб-страницы

• набор иконок электронной коммерции 60 для веб-сайтов и приложений

10 лучших сайтов для загрузки значков

В мире технологий значки используются для каждой задачи. Количество иконок, которые мы видим ежедневно, просто поразительно. Это чрезвычайно полезный и наглядный способ помочь людям понять ваш контент. Дизайн стал основой веб-сайтов, а цифровые активы, такие как значки, наиболее эффективны в проекте.

Что такое значок?

Значок представляет собой пиктограмму или идеограмму , которая помогает пользователю лучше понять содержание. Иконки популярны в современной сети и в основном привлекают внимание в графическом дизайне.

В настоящее время значки играют важную роль в дизайне веб-сайтов. Сегодня каждому дизайнеру нужна иконка для разработки сайта и приложения. Помимо разработки веб-сайтов и приложений, это также важно для разработки брошюр, плакатов, проспектов, листовок, инфографики и т. д. Иконки улучшают внешний вид сайтов и могут обеспечить лучший пользовательский опыт.

Поскольку мир дизайна развивается быстро, у людей не остается достаточно времени для создания собственных дизайнов. В результате в последние годы многие веб-сайты начали предоставлять значки как бесплатно, так и платно. Большинству людей также удобно загружать доступные значки с веб-сайтов вместо того, чтобы создавать новый дизайн. Кроме того, многие веб-сайты предоставляют дополнительные значки для премиальных цен, когда вы подписываетесь на их премиальный план членства.

Бесплатные иконки уникальны и доступны в различных форматах, таких как SVG, PSD, PNG и EPS. Чтобы облегчить поиск лучших веб-сайтов с иконками, я перечислил ниже 10 лучших веб-сайтов, на которых вы можете найти и скачать иконки. Вот список:

1. Flaticon

Flaticon, крупнейшая база данных значков, предлагает 2 604 500 файлов векторных значков вместе с различными пакетами значков. С помощью встроенного бесплатного редактора значков вы можете настроить или изменить размер, положение и цвет значков. Иконки доступны в различных форматах файлов, включая PNG, SVG, EPS, PSD и BASE 64 , и вы можете загрузить свою коллекцию как «Иконочный шрифт» или «SVG Sprite».

Каждый месяц Flaticon генерирует более 60 000 иконок. Icon даже предлагает такие расширения, как генератор шаблонов, Adobe и генератор шрифтов. Во Flaticon любой может стать автором и зарабатывать деньги своим творением. Flaticon предоставляет как бесплатные значки, так и значки премиум-плана.

2. Iconfinder

Iconfinder предлагает 4 285 063 значка SVG и более 50 000 пакетов значков. Онлайн-редактор значков позволяет легко перекрашивать, редактировать и настраивать значки. Иконки доступны в различных форматах файлов, включая PNG, SVG, AI, CSH, ICO, ICNS и BASE 64.

В Iconfinder доступны как бесплатные значки, так и значки премиум-плана. Пользователь может перенести неиспользованные загрузки значков на следующий месяц подписки. Он предлагает вам скидку 30% на план подписки на первый месяц.

3. Icons8

Icons8 предлагает 123 600 бесплатных иконок в различных форматах файлов, включая PNG, SVG, PDF или вставку . Это позволяет вам изменять цвета значков, добавлять элементы и настраивать отступы перед загрузкой.

В Icons8 доступны как бесплатные значки, так и значки премиум-плана. Бесплатные значки доступны в 32 стилях, и каждый стиль значков имеет свой размер в пикселях. Премиум-иконки доступны в любом формате и размере.

4. The Noun Project

The Noun Project предлагает более 2 миллионов иконок, созданных международным сообществом. Иконки доступны в форматах файлов SVG и PNG . Он позволяет изменять цвет и размер значков. В «The Noun Project» вы можете настроить любые значки для идеального соответствия.

Он имеет как бесплатные значки, так и значки премиум-плана. Если вы являетесь бесплатным участником, вы должны давать кредиты дизайнеру значка каждый раз, когда вы используете его значок. Если вы являетесь участником NounPro, вы можете получить неограниченное количество бесплатных лицензий, и вам не нужно беспокоиться об атрибуции.

5. Iconshock

Iconshock предлагает более 2 миллионов профессиональных иконок и около 400 наборов иконок в более чем 30 стилях, включая Flat, Material, iOS, Glyph, Real Vista, Colorful, Window 10, Revamped Office, 3D Realistic , Изометрия и т. д. Iconshock создает около 100 новых иконок каждую неделю, которые будут добавлены в ваш премиум-аккаунт.

Иконки в основном в векторе и с точностью до пикселя, так что вы можете редактировать цвета, формы, размер и стили значков. Он имеет как бесплатные значки, так и значки премиум-плана. Для бесплатной загрузки требуется указание авторства, а для премиальных иконок указание авторства не требуется.

6. Iconscout

Iconscout предлагает более 2 миллионов бесплатных значков и тысячи бесплатных пакетов значков. Иконки доступны в Формат файла PNG, SVG или PDF . Бесплатный онлайн-редактор значков позволяет настроить цвет значка, обводку, стиль и форму.

Для ускорения рабочего процесса вы можете установить плагин Icondrop, который включает инструменты Sketch, Adobe Illustrator, Adobe Photoshop и Office. В Iconscout доступны как бесплатные значки, так и значки премиум-плана.

7. IconArchive

IconArchive предлагает более 735 802 бесплатных иконок и 2458 наборов иконок. Значки доступны в файлах Win, Mac & PNG и SVG 9.0308 как для Интернета, так и для Linux. В IconArchive вы можете искать результаты по цвету.

Они предлагают дополнительные параметры фильтрации, такие как размер, категория, стиль, лицензия для загрузки значков. Мы можем поделиться значком с другими через Facebook, Twitter или по электронной почте. Чтобы настроить значки, вы можете связаться с художником напрямую, обратившись к его портфолио и веб-сайтам.

8. Freepik

Freepik предлагает более 83 832 бесплатных иконок. Иконки доступны в форматах SVG, EPS, PNG, JPG и PSD 9. 0308 форматы файлов. Freepik позволяет редактировать векторные файлы, но вам потребуется программное обеспечение для редактирования векторов, например Adobe Illustrator. Это позволяет вам настраивать тексты, формы, цвета и другие элементы.

Позволяет настроить размер изображения без ущерба для качества разрешения. Freepik предлагает как бесплатные иконки, так и иконки премиум-плана. Если вы являетесь пользователем бесплатной версии, вы всегда должны указывать авторство, а если вы подписаны на планы Freepik Premium, вы можете использовать значки без указания авторства.

9. Pixeden

Pixeden предлагает как платные, так и бесплатные наборы иконок в виде наборов иконок. В Pixeden шрифты значков доступны в формате веб-шрифта Font-Face. Иконки доступны в любом размере, цвете и стиле, как в формате CSS.

Каждый премиум и бесплатный набор иконок доступен в формате PNG с размерами от 16×16 до 512×512. Pixeden предоставляет значки в различных категориях, включая медиа, мобильные устройства, электронную коммерцию, социальные и концептуальные.