Иконки svg для сайта: Бесплатные векторные значки и стикеры — PNG, SVG, EPS, PSD и CSS

Содержание

Иконки «Svg» — скачивайте бесплатно в PNG, SVG, GIF

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Половина сердца

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Вектор

+ В коллекцию

Половина сердца

+ В коллекцию

Половина сердца

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Половина сердца

+ В коллекцию

Половина сердца

+ В коллекцию

Половина сердца

+ В коллекцию

Половина сердца

+ В коллекцию

Вектор

+ В коллекцию

Разбитое сердце

+ В коллекцию

Вектор

+ В коллекцию

Разбитое сердце

+ В коллекцию

Разбитое сердце

+ В коллекцию

Анимированные

Разбитое сердце

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Разбитое сердце

+ В коллекцию

Разбитое сердце

+ В коллекцию

Анимированные

Разбитое сердце

+ В коллекцию

Вектор

+ В коллекцию

Разбитое сердце

+ В коллекцию

Разбитое сердце

+ В коллекцию

Половина сердца

+ В коллекцию

Семинольский головной убор

+ В коллекцию

Половина сердца

+ В коллекцию

Половина сердца

+ В коллекцию

Пожары

+ В коллекцию

Семинольский головной убор

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Пожары

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Семинольский головной убор

+ В коллекцию

Половина сердца

+ В коллекцию

Пожары

+ В коллекцию

Милый монстр

+ В коллекцию

Половина сердца

+ В коллекцию

Разбитое сердце

+ В коллекцию

Разбитое сердце

+ В коллекцию

Половина сердца

+ В коллекцию

Разбитое сердце

+ В коллекцию

Анимированные

Разбитое сердце

+ В коллекцию

Милый монстр

+ В коллекцию

Половина сердца

+ В коллекцию

Милый монстр

+ В коллекцию

Пожары

+ В коллекцию

Ключ от сердца

+ В коллекцию

Половина сердца

+ В коллекцию

30 коллекций бесплатных и свежайших иконок в формате SVG

Привет, друзья.

Спешу представить Вам подборку самых новых и свежих, а так же бесплатных иконок в формате SVG. Их Вы можете использовать для создания дизайна своих сайтов и шаблонов. Тут 30 подборок различных иконок на самую разную тематику, таким образом появляется больше шансов найти именно то, что нужно.

Огромное спасибо http://www.cssauthor.com и рекомендую прошлые подборки:

Светлые иконки — Essential

Скачать

370 SVG иконок для веб интерфейса

Скачать

Цветные иконки для сайта — Practicons

Скачать

SVG иконки в стиле iOS7

Скачать

Скачать бесплатные иконки — Fanaticons

Скачать

Подборка SVG иконок с закругленными углами

Скачать

Подборка иконок — Bitcoin

Скачать

Flat иконки — Pixelvicon

Скачать

SVG иконки кредитных карт

Скачать

Бесплатные иконки социальных сетей в формате SVG

Скачать

100 бесплатных иконок на разную тему

Скачать

Минималистические иконки — Hawcons

Скачать

SVG иконки — Crispy

Скачать

Светлые и бесплатные иконки — Feather

Скачать

Бесплатные белые SVG иконки

Скачать

Несколько бесплатных векторных иконок

Скачать

Светлые и стильные иконки в стиле Flat

Скачать

Круглые иконки — Roundicons

Скачать

SPA — иконки в формате SVG

Скачать

SVG иконки под названием — Museum

Скачать

Иконки в стиле Stroke

Скачать

Несколько Flat иконок

Скачать

Иконки с тонкими линиями бесплатно

Скачать

Flat иконки в формате SVG — Ballicons

Скачать

Иконки на кухонную и ресторанную тематику

Скачать

Векторные иконки с тонкими линиями

Скачать

Иконки сердец бесплатно

Скачать

Иконки в SVG разнообразных разрешений файлов

Скачать

Иконки дня всех влюблённых

Скачать

Бесплатные социальные иконки

Скачать

Создание svg иконок для сайта (favicon svg)

От автора: простые, часто геометрические и выполненные в различных размерах иконки (favicon) отлично подходят под SVG формат. К сожалению, до недавнего времени браузеры очень плохо поддерживали SVG фавиконы. В Firefox 41 появилась поддержка данного формата, в Safari 9 для десктопной и мобильной версии (с некоторыми уступками). Однако в IE/Edge и Chrome все еще нет поддержки, по крайней мере, на данный момент. Тем не менее, ситуация вскоре изменится (должна измениться). Так что стоит уделить немного времени и изучить возможности и синтаксис SVG фавиконов, дабы подготовить ваш сайт к грядущим временам.

Проблема

С момента создания картинки 16х16 пикселей изменилась сама концепция фавиконов. Теперь фавикон должен работать с целой серией иконок, заточенных под тачскрины, с плиточным интерфейсом новых версий Windows, со специальными возможностями Retina дисплеев и т.д. Комплексное решение (от realfavicongenerator) включает в себя довольно длинный список всевозможных вариантов:

<link rel=»apple-touch-icon» href=»/apple-touch-icon-57×57.png»> <link rel=»apple-touch-icon» href=»/apple-touch-icon-60×60. png»> <link rel=»apple-touch-icon» href=»/apple-touch-icon-72×72.png»> <link rel=»apple-touch-icon» href=»/apple-touch-icon-76×76.png»> <link rel=»apple-touch-icon» href=»/apple-touch-icon-114×114.png»> <link rel=»apple-touch-icon» href=»/apple-touch-icon-120×120.png»> <link rel=»apple-touch-icon» href=»/apple-touch-icon-144×144.png»> <link rel=»apple-touch-icon» href=»/apple-touch-icon-152×152.png»> <link rel=»apple-touch-icon» href=»/apple-touch-icon-180×180.png»> <link rel=»icon» type=»image/png» href=»/favicon-32×32.png»> <link rel=»icon» type=»image/png» href=»/android-chrome-192×192.png»> <link rel=»icon» type=»image/png» href=»/favicon-96×96.png»> <link rel=»icon» type=»image/png» href=»/favicon-16×16.png»> <link rel=»manifest» href=»/manifest.json»> <meta name=»msapplication-TileColor» content=»#da532c»> <meta name=»msapplication-TileImage» content=»/mstile-144×144.

png»> <meta name=»theme-color» content=»#ffffff»>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<link rel=»apple-touch-icon» href=»/apple-touch-icon-57×57.png»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon-60×60.png»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon-72×72.png»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon-76×76.png»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon-114×114.png»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon-120×120.png»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon-144×144.png»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon-152×152.png»>

<link rel=»apple-touch-icon» href=»/apple-touch-icon-180×180.png»>

<link rel=»icon» type=»image/png» href=»/favicon-32×32.

png»>

<link rel=»icon» type=»image/png» href=»/android-chrome-192×192.png»>

<link rel=»icon» type=»image/png» href=»/favicon-96×96.png»>

<link rel=»icon» type=»image/png» href=»/favicon-16×16.png»>

<link rel=»manifest» href=»/manifest.json»>

<meta name=»msapplication-TileColor» content=»#da532c»>

<meta name=»msapplication-TileImage» content=»/mstile-144×144.png»>

<meta name=»theme-color» content=»#ffffff»>

Хотя большинство из этих файлов можно и просто положить в корень вашего сайта, а соответствующие приложения выберут, что им необходимо, не прописывая все их в явном виде в HTML, все же это не самый удачный подход. Слишком много контента нужно создать, а потом еще и обслуживать. Один масштабируемый файл будет работать намного лучше. К примеру, логотип нашего сайта сохранен в формате favicon.svg:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<svg xmlns=»//www. w3.org/2000/svg» viewBox=»0 0 500 500″> <title>the new code favicon</title> <polygon points=»201.4,0 96.5,69.1 201.2,141.1 298.5,69.1″ fill=»#f06823″/> <polygon points=»97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5″ fill=»#f4e302″ /> <polygon points=»60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9″ fill=»#2f8bca» /> </svg>

<svg xmlns=»//www.w3.org/2000/svg» viewBox=»0 0 500 500″>

    <title>the new code favicon</title>

    <polygon points=»201.4,0 96.5,69.1 201.2,141.1 298.5,69.1″ fill=»#f06823″/>

    <polygon points=»97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5″ fill=»#f4e302″ />

    <polygon points=»60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9″  fill=»#2f8bca» />

</svg>

И выглядит так:

Фавикон можно добавить строкой кода между тегов head:

<link rel=»icon» type=»image/svg+xml» href=»favicon. svg»>

<link rel=»icon» type=»image/svg+xml» href=»favicon.svg»>

Несколько замечаний:

Составляющие рисунка выполнены отдельными, не перекрывающими друг друга фигурами: значок должен иметь размер 16х16 пикселей. Тут важны простота и четкость.

По тем же самым причинам фон в SVG иконке прозрачный, так что ее можно использовать в различных ситуациях.

Viewbox для SVG должен быть квадратным.

Рисунок должен занимать наибольшую площадь на viewBox’е (холст в SVG).

Тег <title> описывает цели, для которых предназначен рисунок; также стоит добавить <desc> и <title> для каждого полигона <polygon>.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чтобы SVG заработал необходимо указывать MIME тип image/svg+xml.

Добавляем поддержку iOS

В iOS 9 также поддерживаются SVG фавиконы в закрепленных закладках, но с некоторыми оговорками:

Элементы SVG должны быть черного цвета.

В ссылке на фавикон должен быть указан неофициальный атрибут mask-icon.

Не обязательно, но цвет можно изменить также с помощью неофициального атрибута color. Поддерживаемые значения hexadecimal, keyword и rgb. Не рекомендуется использовать яркие цвета.

Учитывая вышеописанные условия, я бы использовал новый SVG файл без информации о цветах:

<svg xmlns=»//www.w3.org/2000/svg» viewBox=»0 0 500 500″> <title>the new code favicon</title> <polygon points=»201.4,0 96.5,69.1 201.2,141.1 298.5,69.1″ /> <polygon points=»97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5″ /> <polygon points=»60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9″ /> </svg>

<svg xmlns=»//www. w3.org/2000/svg» viewBox=»0 0 500 500″>

    <title>the new code favicon</title>

    <polygon points=»201.4,0 96.5,69.1 201.2,141.1 298.5,69.1″ />

    <polygon points=»97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125

    298.5,82.5 200.6,154.5″ />

    <polygon points=»60.1,152.2 58.4,153.3 0,192.2 201.2,339.6

    399.1,192.2 340.2,154.5 199.5,255.9″ />

</svg>

Чтобы это заработало на iOS, добавляем строку:

<link rel=»mask-icon» href=»icon.svg» color=»blue»>

<link rel=»mask-icon» href=»icon.svg» color=»blue»>

Собираем мысли вместе

Предположим, что вам больше не нужно поддерживать IE8 и более ранние версии, значит, формат .ico можно выбросить, а браузерам оставить файл PNG. Чтобы фавикон отображался во всех браузерах и не забыть про SVG, расположим ссылки в следующем порядке:

<link rel=»icon» type=»image/png» href=»favicon. png»> <link rel=»mask-icon» href=»icon.svg» color=»blue»> <link rel=»icon» type=»image/svg+xml» href=»favicon.svg»>

<link rel=»icon» type=»image/png» href=»favicon.png»>

<link rel=»mask-icon» href=»icon.svg» color=»blue»>

<link rel=»icon» type=»image/svg+xml» href=»favicon.svg»>

Мы отказались от использования формата .ico: если бы мы положили в корень сайта файл favicon.ico, то браузеры использовали бы его вместо остальных, и не важно какие директивы вы указали в хедере.

Для iOS и IE все еще нужно указывать отдельные иконки; SVG в данных браузерах еще не работает.

Заключение

SVG как будто создан для фавиконов, и остается только надеяться, что в скором будущем и Chrome будет его поддерживать. Идеальным было бы, чтобы в одном SVG файле для различных степеней детализации и размеров использовались разные элементы <symbol> или <use>… хотя мы и так уже хотим слишком многого.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Еще не используешь SVG фавиконки? / Хабр

Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах (Ну почти во всех).

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

Иконка

Главная фивиконка может быть SVG любого размера. Тип type="image/svg+xml" не нужен.

<link rel="icon" href="favicon.svg">

Тач-иконки

Для иконки на IOS девайсах, а также для избранное на странице новой вкладки в браузере. Вам нужен только размер 180 x 180, и атрибут sizes лишний.

Манифест

Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки являются обязательными для прохождения теста Lighthouse.

Значок используется Android и Chrome. Нужен только самый большой размер 512 x 512.

{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "google-touch-icon.png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

theme-color meta по-прежнему требуется для цвета иконки в Chrome и Android.

<meta name="theme-color" content="#ffffff">

Готово

Вот и все, что вам нужно для современных браузеров, все остальное не нужно. msapplication-TileImage можно добавить, если вам нужен другой значок в плитках Windows, в противном случае используется apple-touch-icon. TileColor больше не используется.

Все остальное

К сожалению, не все используют современные браузеры, но это можно легко решить, поместив favicon.ico размером 32 x 32 в корень вашего веб-сайта. Это работает везде, даже у вашей бабушки.

Темный режим

В заключение, вот совет по темному режиму. Одним из преимуществ значка SVG является то, что вы можете изменить цвет с помощью CSS. При использовании медиа-запроса prefers-color-scheme цвет вашего значка меняется в зависимости от темного или светлого режима пользователя. Этот метод не будет работать со mask-icon, так как цвет указан в атрибуте, но Safari добавляет белый фон, если контраста недостаточно.

<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #fff;
            }
        }
    </style>
    <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Результат

Вот окончательный результат. Скопируйте его в <head> вашего веб-сайта и не забудьте разместить favicon.ico в корне.

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">

Лучшие бесплатные коллекции векторных иконок / Хабр

Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы

Flaticon

или

Iconfinder

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

Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

Responsive Icons (100 иконок, PSD, AI, EPS, SVG)

Icon-Works (130+ иконок, Webfont)

Feather (130 иконок, PSD, SVG, Webfont)

Linea (730+ иконок, SVG, Webfont)

Icony (100 иконок, SVG, PSD)

Free iOS Icons Pack (100 иконок, PSD, Webfont)

Touch Icons (340 иконок, PSD, AI, SVG)

Simple Line Icons (100 иконок, AI, EPS, SVG, PSD)

Themify Icons (320+ иконок, SVG и Webfont)

Elegant Line-Style Icons (100 иконок, AI, SVG)

Pixeden Icon Font Pack (170 иконок, Webfont)

Summer and Essentials Icon Set (50 иконок, EPS, AI, PNG)

Webicons (100 иконок, AI, EPS)

Stroke Icons (80 иконок, PSD, AI, Webfont)

Microns (231 иконок, SVG, Webfont)

Outlined Icons (150 иконок, PSD, SVG, AI, Webfont)

LineIconSet v1.
0 (200 иконок, EPS)
Someicons (153 иконок, EPS, SVG)

Universal Icons (100 иконок, SVG)

Flat Color Icons (300+ иконок, SVG)

Iconia (100+ иконок, Webfont)

Typicons (336 иконок, SVG, Webfont)

Geoph (80 иконок, AI, PSD)

Evil Icons (70 иконок, SVG)

Stroke Gap Icons (200 иконок, AI, PSD, SVG, Webfont)

Unigrid (100 иконок, AI)

Amenities (100 иконок, EPS, PSD)

Elegant Icons (360 иконок, Webfont)

Lightwing (60 иконок, Webfont)

Tonicons (500 иконок, EPS, Sketch, Webfont)

Epic Icons (1000+ иконок, Webfont)

Lynny Icons (900+ иконок, EPS, AI)

Helium (100 иконок, AI, EPS, SVG, Webfont)

Essential Icons (77 иконок, EPS, PSD, AI, SVG)

Dripicons (95 иконок, Webfont)

Cinema (200 иконок, SVG)

Open Iconic (200+ иконок, SVG, Webfont)

Twig (100+ иконок, SVG, Webfont)

MFG Labs Iconset (160+ иконок, Webfont)

PrestaShop Icons (300+ иконок, EPS, Webfont)

Subway (300+ иконок, Webfont)

Entypo (400+ иконок, Webfont)

Fundation Icons (100+ иконок, Webfont)

Ionic Icons (~750 иконок, Webfont)

Material Icons (~1000 иконок, SVG, Webfontg)

Font Awesome (1000+ иконок, Webfont)

Squid
Solid, Flat and Line Icons (150 иконок, EPS, AI, PSD, SVG)
Roundicons (60 иконок, PNG, SVG, EPS, PSD, AI)

Retinaicons (200 иконок, AI)

Swifticons (92*3 иконок, EPS, AI, PSD, Sketch SVG)

Ballicons 2 (36 иконок, PNG, SVG, PSD)

Больше спасибо всем за внимание.

SVG иконок против PNG иконок на современных веб-сайтах



Мне интересно, почему так мало современных веб-сайтов до сих пор используют только PNGs для иконок (но это предположение просто основано на моем наблюдении). До сих пор я знаю, что основными причинами использования PNGs над SVGs являются IE8 и что SVG использует больше мощности CPU (но я не считаю, что это какая-то проблема для простых иконок 1K). Я вижу (и мы в настоящее время используем) много преимуществ в использовании SVGs, либо когда он используется как спрайты, как изображения, либо как встроенный SVG.

(Вопрос , требующий исследования: PNG Sprite vs SVG sprite vs Icon fonts фокусируется на производительности и не имеет соответствующего ответа, Icon Font vs SVG caching and network concern фокусируется на сетевом трафике, но его легко решить, например, шаблонизацией.)

Если новый веб-сайт поддерживает только современные браузеры, есть ли причина не использовать SVGs (или — есть ли причина использовать PNGs для иконок)? Если мы не заботимся о IE8 и использование SVG подкрепляется шаблонизацией и / или кэшированием, есть ли какой-то улов, чтобы полагаться только на SVGs?

html svg icons
Поделиться Источник Robert Goldwein     26 июня 2014 в 14:49

5 ответов


  • Sprite иконок на значок шрифта

    У меня есть sprite из примерно 30 иконок. Я хотел бы преобразовать эти значки в шрифт значков на icomoon.io. У меня есть только файл png sprite. Каков наилучший и наиболее эффективный способ преобразования sprite в шрифт значка?

  • Лучший метод для включения большого количества иконок на веб-сайте?

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



109

Причины SVG может быть хорошим выбором:

  • он легко поддерживает браузеры любого размера, особенно с css background-size
  • вы можете масштабировать их вверх/вниз, например, до эффекта наведения
  • вы можете встроить SVGs и вносить в них изменения в режиме реального времени с помощью JavaScript и DOM
  • вы можете стилизовать SVGs и части SVGs с CSS (изменение цветов, контуров и т. Д.)
  • вы можете генерировать SVGs динамически, как на клиенте, так и на сервере. Из-за их текстовой природы вам не нужны низкоуровневые библиотеки или мощные серверы для их создания.

Причины PNG может быть хорошим выбором:

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

Другие проблемы:

  • некоторые редакторы SVG могут хранить метаданные в вашем SVGs, увеличивая размер файла и, возможно, непреднамеренно раскрывая данные
    • например, при экспорте PNG в Inkscape он сохранял/сохраняет абсолютный путь к этому каталогу в SVG при сохранении
    • SVG компрессоры могут удалить это, но я не тестировал его (не стесняйтесь редактировать, если у вас есть)

Поделиться Brigand     26 июня 2014 в 15:59



17

Если вы не показываете очень простые формы/рисунки или вам специально не нужно изменять части графики с помощью приложения, нет большого стимула использовать SVG. Вы можете создать PNG в два раза больше исходного размера (для дисплеев retina) и при этом размер файла будет на порядок меньше, не говоря уже о лучшем покрытии для устаревших браузеров (нет необходимости в javascript или полифайлах).

Я говорю это как человек, который строит UIs с помощью векторной графики. Это потрясающий инструмент для дизайна, но для delivery/bandwidth/reach трудно превзойти PNG. Только вчера вечером я протестировал хорошо известный логотип. CocaCola.svg было почти 20 тысяч. Поскольку это был сплошной/плоский цвет, я экспортировал как PNG-8 с 12-цветовым сжатием палитры и сократил его до 1.6K (!!!) Для нескольких логотипов это не имеет большого значения, но когда вам нужно показать 40 из них … ну, вы получаете картину.

Самое приятное то, что вы можете превратить PNG в base64 данные uri и встроить их прямо в свою таблицу стилей. Это не рекомендуется для SVG — формата, который уже известен проблемами производительности и совместимости, особенно в мобильных браузерах.

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

Счастливого Проектирования!

Поделиться Steven Garcia     24 февраля 2018 в 08:47



14

SVG-это круто (как красиво описано FakeRainBrigand) и прекрасно визуализируется, но может быть довольно сложным. Браузеру приходится выполнять больше работы при работе с векторными данными, а не с пиксельными изображениями. Изображение-это один элемент, у SVG может быть много дочерних элементов, которые даже могут быть добавлены к DOM при использовании встроенного.

Я не проводил никаких ценных тестов производительности, но с логической точки зрения SVG следует использовать осторожно, когда речь заходит о производительности, особенно при работе с мобильными браузерами среднего возраста (CPU-стресс). Было бы очень полезно иметь диаграмму, на которой вы можете увидеть мощность CPU, потребляемую 100 SVG изображениями, против 100 PNG изображений на разных устройствах Android и IOS …

Еще одна неприятная вещь с SVG заключается в том, что тегу нужен атрибут ширины и высоты для некоторых браузеров Android/Samsung и нашего старого доброго IE. И большинство современных редакторов SVG, таких как A***e Illustrator, просто добавляют атрибут «viewBox».

Самое крутое в SVG-это то, что он хорошо и четко отображается при любой плотности пикселей.

Поделиться corpirate     02 сентября 2015 в 18:12


  • Каков правильный размер векторных рисованных иконок?

    Какой правильный размер выбрать для векторных рисованных иконок, например, при импорте их из SVG? Существует много информации о стандартных размерах иконок для растровых иконок, например на этом сайте . Тем не менее, я немного борюсь за то, чтобы значки, импортированные из SVG, появлялись…

  • Как различные методы иконок/логотипов работают на веб-сайтах?

    Это в основном вопрос о качестве логотипов/иконок, используемых на веб-сайтах. Я создаю логотипы/значки с помощью Illustrator, но когда я вижу значки на профессиональных сайтах (см. изображение и ссылки), они выглядят четкими, как текст, без размытости. Края очень четкие. Например, пожалуйста,…



4

Это правда, png используется почти везде. Я думаю, это потому, что SVG в большинстве случаев довольно бесполезно, изображение должно быть больше (я думаю), и компьютер должен восстанавливать изображение всякий раз, когда вы его увеличиваете (потому что вы всегда увеличиваете изображения, не так ли?) Я думаю, что это самая важная причина.

Поделиться barbaanto     26 июня 2014 в 15:05



4

Отметим, что performancewise SVG может стать ужасным. Даже в современных браузерах, таких как Chrome (пишу это в 2019 году!), CMS-подобная страница с несколькими 100-ю (практически 3-800) значками svg буквально зависает в браузере на 5+ секунд, чтобы закончить рендеринг. Тем временем максимизирую CPU.

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

Вариант #1: конвертировать SVG-файлов в webfont (см. график производительности здесь: http://frozeman.de/blog/2013/08/why-is-svg-so-slow / )

Вариант #2: вернуться к обычному старому PNGs

В таких ситуациях, когда вы ~never хотите сделать что-нибудь необычное, например on-the-fly цветовая модификация, и у вас есть MANY экземпляров SVGs, старый PNG делает свою работу и спасает день!

Поделиться Joe7     27 июня 2019 в 20:30


Похожие вопросы:


Добавление иконок в drawalbe

У меня есть несколько иконок размером 512 x 512, поэтому они имеют высокое разрешение. Я поместил все значки под drawable-xxhdpi в своем проекте android. Названия иконок все правильные (они…


Шрифты иконок против изображений

Мой менеджер говорит мне не использовать шрифты значков на наших сайтах, так как это еще один запрос http плюс дополнительный kBs для загрузки. Кроме того, поскольку мне пришлось бы использовать…


Svg иконок шрифтов для мобильного дизайна

Должен ли я использовать значки svg для адаптивного мобильного дизайна ? из-за дисплея retina. Я читал, что это хорошая идея для небольших иконок, таких как заголовок или заголовок и т. д..


Sprite иконок на значок шрифта

У меня есть sprite из примерно 30 иконок. Я хотел бы преобразовать эти значки в шрифт значков на icomoon.io. У меня есть только файл png sprite. Каков наилучший и наиболее эффективный способ…


Лучший метод для включения большого количества иконок на веб-сайте?

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


Каков правильный размер векторных рисованных иконок?

Какой правильный размер выбрать для векторных рисованных иконок, например, при импорте их из SVG? Существует много информации о стандартных размерах иконок для растровых иконок, например на этом…


Как различные методы иконок/логотипов работают на веб-сайтах?

Это в основном вопрос о качестве логотипов/иконок, используемых на веб-сайтах. Я создаю логотипы/значки с помощью Illustrator, но когда я вижу значки на профессиональных сайтах (см. изображение и…


Есть ли svg источник иконок для FontAwesome?

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


Асинхронная загрузка иконок веб — страниц-кроссбраузерное решение?

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


Как создать SVG иконок и как их реализовать в веб-приложениях?

Как создать SVG иконок и как реализовать SVG иконок в нашем веб-приложении? Не могли бы вы, пожалуйста, кто-нибудь помочь создать и внедрить на веб-приложение?

Лучшие наборы иконок для веб-разработчиков

Перевод статьи «Top icons packs and resources for web».

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

Но рисовать их с нуля долго и дорого. Поэтому имеет смысл обратить внимание на готовые решения.

Вот несколько доводов в пользу использования иконок в вашем следующем проекте:

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

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

Для легкости восприятия продукты в подборке разделены на категории. Категорию вы сможете найти перед описанием продукта. Речь идет о следующих категориях:

  • Бесплатные наборы иконок.
  • Торговые площадки. Там содержатся иконки разных производителей, отличающиеся как по цене, так и по качеству.
  • Иконки в стиле Material design и Flat.
  • Наборы CSS-иконок. Эти иконки, как следует из названия, созданы на основе CSS. Для их использования нужно просто скопировать код себе на страницу.
  • Иконочные шрифты. В этих шрифтах вместо букв и цифр используются символы. Они популярны в среде веб-дизайнеров, поскольку их можно стилизовать при помощи CSS точно так же, как обычный текст. Браузеры тоже воспринимают иконочные шрифты как текст, так что вам нужно будет нормализовать иконки во избежание проблем со сглаживанием. Иконочные шрифты поддерживаются практически всеми браузерами.
  • SVG-иконки. Масштабируемая векторная графика (SVG) это основанный на XML формат векторной графики, который может масштабироваться до любого размера без потери четкости. Эти иконки могут отображаться при помощи CSS (с тегами объектов и изображений) или их можно вставить прямо в HTML.
  • Наборы символов и пиктограмм.

Наборы и источники

Flaticon

  • Формат файлов, тип ресурса: PNG, SVG, EPS, PSD и BASE 64, торговая площадка.
  • Лицензия и цена: бесплатный (с ограничениями) и премиальный (от 9,99 долларов/месяц) план.

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

Adobe Extension позволяет легко импортировать иконки в Photoshop, Illustrator и After Effects.

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

Основные особенности:

  • Adobe Extension для CC suite;
  • лицензия Linkshare для премиальных вариантов;
  • ежемесячное добавление новых наборов иконок.

Премиальная подписка FlatIcon даст вам полные права по части лицензирования, доступ к эксклюзивному контенту, отсутствие рекламы, а также возможность создавать неограниченные коллекции.

Jam Icons

  • Формат файлов, тип ресурса: SVG, CSS.
  • Лицензия и цена: бесплатно, MIT.

Jam icons это набор из 896 иконок, сделанных вручную. Их можно использовать в веб-проектах и приложениях в виде SVG-файлов, а можно и в виде шрифта с заданными CSS-стилями. Размер иконок — 6px, 24px и 32px. Они могут быть как с заливкой, так и полые.

Fontisto

  • Формат файлов, тип ресурса: CSS
  • Лицензия и цена: бесплатно, MIT

Fontisto это набор векторных иконок. Сами значки можно моментально кастомизировать при помощи CSS: изменить размер, цвет, добавить тень. Поскольку это векторная графика, иконки будут хорошо выглядеть на экранах с высоким разрешением.

На сайте проекта можно найти полную документацию и различные руководства по началу работы и кастомизации продукта. Чтобы начать использовать иконки, можно просто вставить ссылку на сайте. Но Fontisto можно использовать и с менеджерами пакетов (npm, yarn, bower и т. д.).

Iconmonstr

  • Формат файлов, тип ресурса: SVG, EPS, PSD и PNG, торговая площадка.
  • Лицензия и цена: бесплатно.

В коллекции Iconmonstr вы найдете больше четырех тысяч иконок. Каждый набор представлен в двух версиях — с заливкой и без, что позволяет использовать эти иконки в самых разнообразных приложениях. Все иконки на сайте можно использовать бесплатно, в том числе в коммерческих целях. Иконки оптимизированы для использования в вебе.

Библиотека иконок Pixsellz

  • Формат файлов, тип ресурса: SVG, EPS, PSD, PNG, FIG, Material design.
  • Лицензия и цена: бесплатно, Apache License Version 2.0.

Огромный пакет, содержащий больше тысячи иконок, разделенных на 16 категорий. Иконки выдержаны в стиле Material design, в трех разных видах: с закруглениями, в виде контуров и двуцветные. Набор доступен в шести форматах файлов, подходящих для различных программ.

Entypo

  • Формат файлов, тип ресурса: SVG.
  • Лицензия и цена: бесплатно, Creative Common License 4.0.

Entypo это набор svg-иконок, тщательно разработанных несколько лет назад Дэниелом Брюсом из Швеции. Иконки превосходны; если говорить о бесплатных, то они точно лучшие. Всего их в наборе 411, использовать можно бесплатно под лицензией Creative Commons.

По словам автора, создание шрифта требует большого количества времени, которое он предпочитает потратить на разработку новых пиктограмм.

Evil Icons

  • Формат файлов, тип ресурса: SVG, Sketch.
  • Лицензия и цена: бесплатно, MIT.

Это очень объемный набор, в котором вы найдете и SVG, и исходные файлы. То есть, можно скачать файлы для Illustrator и .sketch-файлы для Sketch.

Все иконки выполнены в стиле тонких линий, что прекрасно подходит для большинства сайтов. А возможность редактировать исходные файлы делает этот набор особенно ценным.

Streamline icons

  • Формат файлов, тип ресурса: ICONJAR, Sketch, FIG, XD, SVG, AI, PDF, PNG.
  • Лицензия и цена: от бесплатного использования до $411.

Streamline Icons это еще один бесплатный набор красивых иконок. Всего значков в наборе больше 30 тысяч (они разделены на 53 категории).

Это один из немногих наборов, оптимизированных для Sketch, благодаря чему можно изменять ширину линий и цвет значков. Каждая иконка в Streamline 3.0 представлена в трех вариантах: light, regular и bold.

Компания имеет собственное веб-приложение, позволяющее искать и скачивать иконки при помощи браузера.

Smashicons

  • Формат файлов, тип ресурса: JAR, SVG, AI, Sketch, торговая площадка.
  • Лицензия и цена: 5 долларов в месяц.

В коллекции Smashicons больше 219 тыс. иконок, совместимых со многими платформами. Есть простое в использовании веб-приложение для поиска значков.

Монетизируется Smashicons несколько иначе, чем другие библиотеки. Здесь есть платная подписка, цена — 5 долларов ежемесячно. За эту сумму вы получаете доступ ко всей уже существующей коллекции, а также ко всем иконкам, которые будут выпущены в дальнейшем.

Icons8

  • Формат файлов, тип ресурса: SVG, PNG, PDF.
  • Лицензия и цена: Good Boy License, от бесплатного использования до 19,9 долларов в месяц.

В коллекции Icons8 вы найдете больше 120 тысяч иконок разных категорий (бизнес, офис, люди, еда, социальные сети) в разных стилях (в виде контуров, с заливкой, полноцветные). Значки разработаны так, чтобы соответствовали стилю определенной операционной системы. Есть версии для Windows, iOS и Android.

Иконки работают в Sketch, Photoshop и Xcode. Перед скачиванием можно воспользоваться веб-редактором.

Icomoon

  • Формат файлов, тип ресурса: SVG, PNG, PDF.
  • Лицензия и цена: от бесплатного использования до 139 долларов в месяц.

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

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

Также возможно создание собственных иконочных шрифтов.

Glyphish

  • Формат файлов, тип ресурса: SVG, PNG, PDF, PSD, Glyph, иконочный шрифт.
  • Лицензия и цена: Creative Common Attribution, от $25 до $99.

Glyphish предлагает несколько разных наборов иконок. Каждый набор поставляется в разных форматах, включая PNG, SVG, PSD и AI. Базовый набор иконок доступен по цене в 25 долларов, а расширенный обычно стоит $99. В бесплатной демо-версии вы найдете 50 значков. Все они пригодны для редактирования.

Основные особенности:

  • иконки для нескольких платформ (iOS, Android, веб, Windows),
  • набор из 50 бесплатных иконок,
  • легкое перетаскивание в Xcode,
  • размер иконок специально подогнан для дисплеев Apple Retina.

Ionicons

  • Формат файлов, тип ресурса: SVG и веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно, MIT.

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

Основные особенности:

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

Angular Material Icons

  • Формат файлов, тип ресурса: SVG, веб-шрифт, Material design.
  • Лицензия и цена: бесплатно, Apache License 2.0.

Material Icon это бесплатный набор иконок от Google. Для обеспечения читаемости и четкости эти иконки оптимизированы для всех платформ и дисплеев. Они совершенно бесплатны и доступны на GitHub. В наборе вы найдете больше тысячи значков для самых разных нужд интерфейса.

Все символы доступны в пяти разных темах. Лучший формат для веб-проектов — простой в использовании иконочный веб-шрифт.

Linearicons

  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: от бесплатного использования до $59, Common Creative License.

Набор иконок Linear Icon — один из самых популярных, как для личного, так и для коммерческого использования. Имеет бесплатную и премиальную версию. Бесплатная версия этого прекрасного набора поставляется под лицензией Creative Common.

Иконки разделены на разные пакеты (например, Desktop Package) — можно выбирать наиболее подходящий для своих нужд.

Feathericons

  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно, MIT.

Feather это один из самых популярных наборов иконок open-source. Значки доступны в SVG-формате, всего их больше 250.

Иконки легко редактировать; вне зависимости от размера, выглядят они очень четко. Эти значки изначально разрабатывались в качестве иконочного шрифта, так что с использованием в качестве веб-шрифта проблем не будет.

Iconfinder

  • Format: SVG, PNG, ICO, торговая площадка.
  • Лицензия и цена: от $9 до $49 в месяц, есть предоплаченный тариф.

Iconfinder это один из самых популярных источников иконок в сети. Он предлагает больше 4 миллионов иконок, предоставляя пользователям широкие возможности для поиска (по формату, цене, размеру, фону и т. д.).

Файлы иконок доступны в форматах SVG, PNG, ICO, ICNS и Adobe Illustrator, расширение ранжируется между 16×16 и 512×512. Если не найдете подходящих для себя иконок, можно поработать с лучшими дизайнерами сайта, чтобы создать значки специально для вашего бренда.

The Noun Project

  • Формат файлов, тип ресурса: SVG, PNG, торговая площадка.
  • Лицензия и цена: Creative Commons License, от $39.99.

The Noun Project предлагает одну из самых обширных библиотек иконок в интернете. Большинство значков доступны в форматах SVG и PNG, в черном и белом стиле.

Библиотеку наполняют иконки разных дизайнеров. Это место, где создатели иконок и разработчики могут сотрудничать: первые продают свой дизайн, а вторые могут выбрать подходящий для себя набор из практически бесконечного количества премиальных иконок.

Поиск по библиотеке очень прост. Коллекция насчитывает больше 150 тысяч иконок и регулярно обновляется: ежедневно добавляются новые иконки и наборы.

Иконки Fontawesome

  • Формат файлов, тип ресурса: SVG, PNG, иконочный шрифт, торговая площадка.
  • Лицензия и цена: SIL OFL 1.1.

Font Awesome это один из самых популярных и самых используемых наборов иконок. Это также дефолтный набор команды Bootstrap. Среди прочих форматов, иконки доступны в формате SVG. Лицензия открыта, иконки можно использовать бесплатно как в личных, так и в коммерческих целях.

Каждая иконка полностью масштабируема и управляется напрямую через CSS. Вы можете менять цвета, тени, градиенты фона и т. д. при помощи чистого CSS3. Еще один довод в пользу этой библиотеки — полная оптимизация и отсутствие проблем с совместимостью, поскольку здесь вообще не участвует JavaScript.

Основные особенности:

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

Lineicons

  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно.

Этот набор содержит больше 450 иконок в разных категориях. То есть, вы точно найдете здесь нужную иконку для вашего проекта. LineIcons также предоставляет бесплатную CDN с понятной документацией для легкого старта.

Иконки представлены как в виде веб-шрифта, так и в виде SVG-файлов, что позволяет выбирать наиболее подходящий вариант для вашего проекта.

Итоги

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

Надеюсь, эта статья поможет вам выбрать наиболее подходящее для вас решение.

21 бесплатный набор иконок SVG для коммерческого использования в веб-дизайне

Значки

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

SVG получил широкое распространение в веб-дизайне и регулярно используется в качестве веб-графики, веб-иконок, а также для анимации на веб-сайтах. Значки SVG предлагают такие преимущества, как более четкая визуализация при разных размерах, меньший размер файла и более простая настройка с помощью CSS.Если вы только начинаете, вы можете обратиться к этим бесплатным руководствам по использованию SVG в веб-проектах. Также ниже вы найдете несколько руководств, связанных с использованием значков SVG в веб-дизайне:

Бесплатные иконки SVG для веб-дизайна

В Интернете есть множество бесплатных библиотек значков, однако не все они предлагают значки в формате SVG. Ниже мы выбрали те наборы значков и библиотеки, которые предлагаются либо в формате SVG, либо в нескольких форматах, таких как PNG, SVG и веб-шрифты.

На момент составления этого списка эти SVG-иконки разрешалось использовать как в личных, так и в коммерческих проектах веб-дизайна.Тем не менее, мы рекомендуем вам ознакомиться с последними условиями лицензии и ограничениями использования перед их загрузкой и использованием.

1. SVG Repo

SVG Repo содержит множество бесплатных векторов и значков в формате SVG. Вы можете бесплатно скачать одно- или многоцветные векторные изображения для коммерческого использования. Он имеет репозиторий с более чем 300 000 бесплатных векторных иконок SVG, которые вы можете легко найти. Вы также можете фильтровать значки SVG по категориям, таким как одноцветные значки, многоцветные значки, обведенные значки или значки с заливкой.

2.Иконки начальной загрузки

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

3. Героиконы

Heroicons — это набор красивых SVG-иконок, созданных вручную создателями Tailwind CSS. Он включает 230 иконок с лицензией MIT .Вы можете свободно использовать его как в личных, так и в коммерческих проектах. Также доступны библиотеки React и Vue, которые можно установить через npm . Вы также можете скачать исходные файлы Figma для значков SVG.

4. Font Awesome Icons

Font Awesome, самый популярный значок шрифта, используемый в Интернете, предлагает 600+ значков , а также доступен в виде значков SVG среди других форматов, таких как TTF, WOFF, EOT и т. Д. В качестве альтернативы вы можете загрузить векторные значки Font Awesome (SVG и EPS).

5. Значки материального дизайна от Google

иконок Material Design — это официальный набор иконок от Google, созданный в соответствии с рекомендациями по материальному дизайну. Эти значки под лицензией Apache License Version 2.0 можно использовать бесплатно, а также можно повторно микшировать и публиковать.

Пакет содержит 700+ значков для различных категорий, таких как значки связи, значки файлов, значки редактора, значки действий, значки мультимедиа, социальные сети и значки уведомлений. Загружаемый zip-архив содержит все значки в формате SVG, спрайты SVG и CSS, а также значки в формате PNG.

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

6. Octicons от GitHub

Octicons — это масштабируемые векторные иконки от команды GitHub. Эти значки SVG находятся под лицензией SIL Open Font License. Octicons содержит 150+ значков , подходящих для проектов веб-дизайна, а также предлагает значки в спрайтах SVG. Вы можете установить Octicons с помощью npm также в своих веб-проектах.

7. Значки Entypo

Entypo от Daniel Bruce — это бесплатный набор премиум-качества 400+ SVG иконок , предлагаемый бесплатно по лицензии CC BY-SA 4.0. Ранняя версия Entypo предлагалась в виде шрифта значков, однако теперь для загрузки доступны только значки SVG. Вы можете использовать такие приложения, как Fontello, Fontastic.me или IcoMoon, чтобы преобразовать их в спрайты значков SVG.

Entypo включает значки SVG для популярных социальных сетей, таких как Facebook, Twitter, Pinterest, Instragram и т. Д.

8. Zondicons

Zondicons — это набор бесплатных SVG-иконок премиум-класса от дизайнера пользовательского интерфейса и иллюстратора Стива Шогера. Эти значки бесплатны для коммерческого использования в любом цифровом продукте.В пакет включено 250+ SVG-иконок . В дизайне Zondicons используется геометрический подход с неизменными пропорциями, а значки имеют четкие края и гладкие углы на всех платформах и в браузерах.

9. Hawcons

Hawcons предлагает 500+ высококачественных векторных значков пользовательского интерфейса в форматах SVG, EPS и PDF. PNG, а также файлы веб-шрифтов также доступны в загруженном пакете шрифтов. Вы можете использовать Hawcons в коммерческих и личных проектах без указания авторства.

Hawcons предлагает значки в 6 различных категориях: документы, спорт, погода, эмодзи, жесты и типы файлов. Все значки доступны как в виде штрихов, так и в виде значков с заливкой.

10. Иконы с перьями

Иконки Feather разработаны Коулом Бемисом и содержат 200+ SVG-иконок в минималистичном дизайне. Иконки доступны по лицензии MIT и, следовательно, бесплатны для использования как в личных, так и в коммерческих проектах.

Набор значков

Feather содержит значки в 8 различных категориях, включая элементы управления мультимедиа, общение, фото и видео, значки местоположения и погоды.

11. Откройте Iconic Icon Set

Open Iconic — это набор значков с открытым исходным кодом, содержащий более 200 значков в форматах SVG, веб-шрифтов и растров. Иконки SVG Open Iconic находятся под лицензией MIT License , а его шрифты — под Open Font License. Иконки предлагаются в нескольких других вариантах, таких как PNG, WebP, EOT, OTF, TTF и WOFF.

12. Linea Бесплатный набор иконок

Linea — это бесплатный набор значков, содержащий 730+ значков в различных категориях: простые, стрелки, музыка, погода, программное обеспечение и значки электронной коммерции.Эти линейные значки, разработанные Дарио Феррандо, можно бесплатно использовать в коммерческих целях и доступны в форматах SVG, PNG, а также в виде значков.

13. Бесплатные иконки IcoMoon

IcoMoon предлагает более 400 бесплатных векторных иконок в форматах SVG, PDF, EPS, Ai, PSD. Эти значки также оптимизированы для использования в качестве шрифтов значков, также доступна версия PNG. Под лицензией GPL / CC BY 4.0 значки можно использовать бесплатно. Кроме того, вы можете использовать приложение IcoMoon для создания собственных наборов шрифтов и спрайтов SVG.

14.Линейные значки

Пакет значков

Linearicons содержит более 1000 линейных значков, в то время как его бесплатная версия в настоящее время содержит 170 значков . Значки доступны как в виде веб-шрифтов, так и в виде значков SVG.

Бесплатная версия Linearicons находится под лицензией CC BY-SA 4.0 лицензии и требует указания ссылки на linearicons.com при использовании в коммерческих проектах. Премиум-версия не требует указания авторства.

15. Типиконы

Typicons — это бесплатные для использования 300+ векторных иконок доступны как веб-шрифты и как исходные файлы SVG.Вы также можете установить Typicons через npm. Эти значки SVG находятся под лицензией CC BY-SA.

16. Набор иконок плоской линии

Набор из 25 элегантно оформленных значков векторных линий, которые включают значки для камеры, автомобиля, денег (доллар), доставки, чата, продажи, корзины покупок, новостей и т. Д. Загрузка содержит версии этих значков в форматах SVG, AI, EPS, PNG и PSD. .

17. Линейные иконки от Elegant Themes

Этот бесплатный набор иконок в линейном стиле предлагается компанией Elegant Themes и содержит 100 иконок, подходящих для веб-сайтов.Загружаемый файл содержит как векторные файлы SVG, так и файлы AI. Файлы PNG также включены. Эти значки выпущены под лицензией GPL .

18. Linecons

Linecons — это бесплатный набор векторных иконок, содержащий 48 векторных иконок в контурном стиле. Загрузите файлы SVG и AI conatins вместе с версиями webfont, PSD и PNG. Linecons можно использовать бесплатно даже для коммерческих проектов.

19. Набор значков Windows 10

Этот бесплатный набор иконок содержит 200 линейных иконок в стиле Windows 10 в формате SVG.Иконки доступны как для личной, так и для коммерческой работы без указания авторства.

20. Иконки с тематикой любви

Эти любовные тематические значки ко Дню святого Валентина доступны в 4 форматах: EPS, PDF, SVG и PNG 500 × 500 пикселей. Имея лицензию Creative Commons Attribution-NoDerivs 3.0 Unported, вам разрешается использовать их в своей коммерческой работе бесплатно при условии надлежащего указания авторства.

21. SEO Иконки

Этот бесплатный набор значков SEO содержит 37 высококачественных значков SEO в масштабируемом векторном формате, а также большие значки PNG.Загружаемый файл содержит значки в форматах AI, EPS, SVG и PNG (1024x1024px). Пакет значков находится под лицензией Creative Commons Attribution 3.0 Unported License, которая позволяет вам бесплатно использовать эти значки SEO в своих коммерческих проектах в обмен на указание авторства.

Бонус: Премиальные наборы иконок SVG

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

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

5700+ Комплект плоских иконок

Этот огромный набор плоских значков SVG содержит 5700+ значков в 40 различных категориях. Иконки представлены в 6 форматах файлов: SVG, AI, EPS, PDF, JPG и PNG.

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

6000+ иконок материального дизайна

Еще один огромный набор иконок в Material Design с более чем 6000 иконок .Эти значки доступны в 8 различных форматах файлов: SVG, AI, EPS, PDF, JPG, PSD, CSH и PNG.

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

Icon54 — 4000 идеальных иконок

Это векторный набор значков, содержащий 4000 значков в 85 различных категориях. Доступны линейные и сплошные версии этих значков, поэтому в целом вы получаете 8000 линейных и сплошных значков.Вы можете выполнить простой поиск по этим значкам с помощью приложения Iconjar. Эти значки совместимы с iOS и Android и доступны как SVG, Sketch, AI, EPS, CSH, PNG и веб-шрифты.

Ultimate Line Icons Pack

Это пакет из 2100+ линейных векторных иконок , которые доступны в виде файлов SVG, PNG, JPEG, GIF и AI. Пакет включает значки во многих категориях, таких как значки для 3D-печати, значки сельского хозяйства, значки животных, значки пекарни, значки конфет и кондитерских изделий, значки чата и многое другое.

Иконки линии Futuro

Иконки Futuro состоят из более 1000 векторных иконок в двух стилях: Line и Spot. Иконки предлагаются в виде файлов AI, EPS, SVG, PDF и PNG. Иконки хорошо распределены по таким категориям, как «Медицина», «Химия», «Наука», «Технологии», «Безопасность», «Цифровой маркетинг» и «Реклама».

Дополнительные бесплатные ресурсы для значков

Помимо упомянутых выше библиотек значков SVG, на нашем сайте вы также можете найти следующие бесплатные ресурсы значков:

Если мы пропустили какой-либо бесплатный набор иконок SVG в нашем списке выше, сообщите нам об этом в комментариях.

20+ лучших пакетов ICON для веб-разработчиков и дизайнеров | Анастасии Овчинниковой | Flatlogic

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

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

Вот несколько больших плюсов использования иконок в вашем следующем дизайнерском проекте UX.

  • Иконки помогают повысить удобочитаемость сайта или приложения.
  • Хорошо оформленные значки помогают уменьшить объем текста. Использование значков делает ваше сообщение понятным без текста.
  • Значки могут добавить индивидуальности вашему продукту.
  • Иконки могут быть хорошей отправной точкой в ​​знакомстве с продуктом.
  • И последнее, но не менее важное: одна из важнейших функций иконок — помочь пользователям интуитивно понять приложение как при первом знакомстве, так и во время последующего использования.

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

Для вашего удобства мы разделили товары на несколько категорий. Перед описанием вы увидите категорию, к которой принадлежит этот продукт.

  • Бесплатные наборы иконок .
  • Торговые площадки. На торговой площадке представлены иконки разных производителей. Здесь можно найти как дешевые и дорогие, так и хорошие и некачественные товары.
  • Материальный дизайн наборов значков и плоских наборов значков.
  • Наборы иконок CSS. CSS-иконки созданы с использованием — угадайте, что — CSS. Чтобы использовать их, просто скопируйте код на свою страницу.
  • Иконки шрифтов. Согласно Pluralsight, шрифты значков — это фактические шрифты, которые содержат символы и глифы вместо букв или цифр. Они популярны среди веб-дизайнеров, поскольку вы можете стилизовать их с помощью CSS так же, как и обычный текст. Иконочные шрифты обрабатываются браузерами как текст, поэтому вам необходимо нормализовать их, чтобы избежать проблем со сглаживанием текста, и поддерживаются почти во всех браузерах.
  • SVG-иконки. Scalable Vector Graphics (SVG) — это формат векторной графики на основе XML, который можно масштабировать до любого размера без потери четкости. Они могут быть отображены с помощью CSS, тегов объектов, тегов изображений или встроены непосредственно в ваш HTML.
  • Глифы и пиктограммы наборов иконок.

Flaticon

Веб-сайт: https://www.flaticon.com/packs
Форматы и тип: PNG, SVG, EPS, PSD и BASE 64, Marketplace
Цена и лицензия: Ограниченный бесплатный план и премиум-планы от 9 долларов США.99 / месяц

Источник изображения: https://www.flaticon.com/packs

Flaticon содержит полностью редактируемые векторы и может использоваться как для личных, так и для коммерческих проектов. FlatIcon содержит более 2,3 миллиона векторных иконок, сгруппированных в 51202 пакета.

Продукт имеет расширение Adobe Extension, которое позволяет легко импортировать значки в Photoshop, Illustrator и After Effects. Если вы хотите использовать веб-шрифт вместо статических файлов для ваших значков, FlatIcon позаботится о преобразовании формата и сгенерирует веб-шрифт, готовый к использованию.Вы также можете настроить загруженные значки.

Основные факты:

  • более 90 000 иконок;
  • форматы SVG, EPS, PSD и PNG;
  • иконочных шрифтов;
  • Adobe Extension for CC Suite;
  • Лицензия Linkshare с дополнительными опциями; и
  • новых пакетов значков добавляются каждый месяц.

Премиум-подписка с FlatIcon предоставит вам полные лицензионные права, доступ к эксклюзивному контенту, отсутствие рекламы, приложение MacOS и расширения Adobe, а также возможность создавать неограниченное количество коллекций.

Веб-сайт: https://jam-icons.com/
Формат и тип: SVG, CSS
Цена и лицензия: Free, MIT

Источник изображения: https: // jam-icons. com /

Значки Jam — это набор из 896 значков, созданных вручную. Этот пакет значков поставляется с версиями SVG и шрифтов. Значки можно использовать как файлы SVG в ваших проектах в Интернете, печати или разработке приложений. Значки также можно использовать в качестве шрифта с заданными таблицами стилей CSS. Есть размеры 16px, 24px и 32px.Вы также можете выбрать заливку или обводку значков.

Веб-сайт: https://fontisto.com/
Формат и тип: CSS
Цена и лицензия: Бесплатно, MIT

Источник изображения: https://fontisto.com/

Fontisto является пакет векторных иконок. Иконки можно мгновенно настроить: размер, цвет, тень и все, что можно сделать с помощью CSS. Продукт не требует Javascript. Иконки Fontisto являются векторными, а это значит, что они будут хорошо смотреться на мониторах с высоким разрешением.

На веб-сайте вы можете найти полную документацию и различные руководства по запуску и настройке продукта. Вы можете начать использовать продукт, просто вставив ссылку на свой сайт. Кроме того, вы можете использовать Fontisto с подходящими вам менеджерами пакетов: npm, yarn, bower и т. Д.

Веб-сайт: https://iconmonstr.com/
Формат и тип: SVG, EPS , PSD и PNG, Торговая площадка
Цена и лицензия: Бесплатно

Источник изображения: https: // iconmonstr.com /

Коллекция иконок Iconmonstr насчитывает более 4400 иконок. Каждый набор значков предлагает как очертания, так и варианты графики с заливкой, чтобы их можно было использовать в различных дизайнерских приложениях. Все значки на этом сайте доступны бесплатно, а файлы значков имеют такие форматы, как SVG, AI, PSD и PNG. Файлы можно использовать в коммерческих и бесплатных целях.

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

Основные характеристики:

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

Веб-сайт: https://icons.pixsellz.io/
Формат: SVG, EPS, PSD, PNG, FIG, Material design
Цена и лицензия: бесплатно, Apache License Version 2.0

Источник изображения: https://icons.pixsellz.io/

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

Ключевые особенности :

  • 3 стиля,
  • стилей Figma,
  • 1000+ значков,
  • 24 × 24 пикселя,
  • стилей и символов эскиза,
  • 16 категорий и
  • 6 форматов файлов.

Web-сайт: http: // www.entypo.com/
Формат и тип: SVG
Цена и лицензия: Бесплатно, Creative Common License 4.0

Источник изображения: http://www.entypo.com/

Entypo — это тщательно созданный семейный пакет значков svg несколько лет назад Дэниел Брюс из Швеции. Эти значки великолепны: когда дело доходит до бесплатных услуг, они первоклассные. Продукт поставляется в формате SVG с 411 значками, бесплатно с лицензией Creative Commons.

Автор говорит, что создание шрифта занимает много времени, и лучше потратить время на разработку новых пиктограмм.

Веб-сайт: https://evil-icons.io/
Формат и тип: SVG, Sketch
Цена и лицензия: Free, MIT

Источник изображения: https: // evil-icons. io /

Этот пакет огромен, и в нем есть все, включая SVG и исходные файлы. Это означает, что вы можете загружать SVG вместе с файлами для Illustrator и файлами .sketch для Sketch.

Каждый значок следует тонкой линии, и они идеально подходят для большинства веб-сайтов.Тот факт, что вы можете редактировать исходный источник, делает их еще более ценными.

Веб-сайт: https://streamlineicons.com/
Формат и тип: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG
Цена и лицензия: Бесплатно до 411 долларов США

Изображение источник: https://streamlineicons.com/

Streamline Icons — еще один красивый и легко адаптируемый бесплатный набор значков на веб-рынке. Инструмент разделен на 53 категории с более чем 30000 векторными иконками.

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

У компании есть собственное веб-приложение, которое помогает просматривать, искать и загружать значки прямо из браузера.

Основные характеристики:

  • организовано более 30000 векторных иконок;
  • Smart Strokes для изменения толщины контура;
  • Эскиз, форматы AI, EPS, PDF, PNG, SVG;
  • веб-приложение для поиска и редактирования иконок;
  • каждый значок в Streamline 3.0 имеет три уникальных веса: светлый, обычный и жирный.

Веб-сайт: https://smashicons.com/
Формат и тип: JAR, SVG, AI, SKETCH, Marketplace
Цена и лицензия: Бесплатно до $ 149

Источник изображения: https: / /smashicons.com/

Smashicons предлагает обширную коллекцию значков с более чем 219000 значков в своей библиотеке. Smashicons работает немного иначе, чем другие: их цена основана на ежемесячном плане 5 долларов в месяц. Это означает, что за 5 долларов в месяц вы получаете доступ ко всей их коллекции существующих значков, а также к любым будущим значкам, которые они выпустят.

Основные характеристики:

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

Веб-сайт: https://icons8.com/
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Good Boy License, бесплатно до 19,90 в месяц

Источник изображения: https : // значки8.com /

Набор значков из Icons8 включает более 1 20000 значков, охватывающих несколько категорий; от бизнеса и офиса до людей, еды и значков социальных сетей. Иконки созданы, чтобы имитировать внешний вид конкретной операционной системы. Вы можете скачать их в версиях для Windows, iOS и Android.

Иконки работают в Sketch, Photoshop и Xcode. Вы можете использовать веб-редактор перед загрузкой значков в свою систему.

Основные возможности:

  • Форматы SVG, PNG и HTML;
  • значков доступны в различных стилях, таких как значок линии, значок с заливкой и полноцветный;
  • все иконки можно скачать через.zip-файл;
  • редактировать перед загрузкой;
  • как бесплатная, так и платная подписка.

Веб-сайт: https://icomoon.io/
Формат и тип: SVG, PNG, PDF
Лицензия и цена: Бесплатно до 139 долларов в месяц

Источник изображения: https: // icomoon .io /

Icomoon представляет собой полноценный инструмент для иконографии и управления иконками. В продукте есть качественное решение для редактирования и управления иконками. Иконки Icomoon созданы вручную на сетке 16X16 и доступны в форматах SVG, EPS, PSD, PDF и AI.Набор иконок также постоянно обновляется его создателями.

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

Основные характеристики :

  • комплексных инструментов управления значками,
  • бесплатных и платных вариантов загрузки,
  • широкий выбор форматов загрузки,
  • бесплатных и простых обновлений.

Web-сайт: http: // www.glyphish.com/
Формат и тип: SVG, PNG, PDF, PSD, Glyph, Icon font
Лицензия и цена: Creative Common Attribution, от 25 до 99 долларов США

Источник изображения: http: //www.glyphish. com /

Glyphish предлагает множество различных пакетов значков. Каждый пакет поставляется в различных форматах, включая PNG, SVG, PSD и AI. Базовый пакет значков доступен за 25 долларов, а самый лучший — по обычной цене 99 долларов. Бесплатная демоверсия включает 50 иконок. Все иконки легко редактируются дизайнерами.

Основные возможности:

  • иконок для нескольких платформ: iOS, Android, Web, Windows;
  • набор из 50 бесплатных иконок;
  • простое перетаскивание в Xcode;
  • значков, специально созданных для дисплеев Apple Retina.

Веб-сайт: https://ionicons.com/
Формат и тип: SVG и Webfont, шрифт Icon
Лицензия: MIT

Источник изображения: https://ionicons.com/

The Команда Ionic решила выпустить свои иконки в виде веб-шрифта под названием Ionicons.Естественно, они абсолютно бесплатны и доступны на GitHub. Вы даже можете добавить эти значки прямо на свой сайт, используя версию таблицы стилей для CDN. Он полностью поддерживает SVG и веб-шрифты.

Основные характеристики:

  • совершенно бесплатно,
  • простая установка путем копирования и вставки ссылки,
  • поставляется в виде веб-шрифта,
  • индивидуальных размеров,
  • более 1100 элементов.

Веб-сайт: https://material.io/resources/icons/?style=baseline
Формат и тип: SVG, Webfont, Material design
Лицензия и цены: бесплатно, Apache Лицензия 2.0

Источник изображения: https://material.io/resources/icons/?style=baseline

Material Icon — это бесплатный набор значков от Google. Чтобы обеспечить удобочитаемость и ясность, эти значки были оптимизированы, чтобы они отлично смотрелись на всех платформах и дисплеях. Эти значки материалов абсолютно бесплатны и доступны на GitHub. Этот набор значков огромен и включает более 1000 значков, охватывающих широкий спектр функций интерфейса.

Все символы доступны в пяти темах. Вы получите несколько загружаемых размеров и плотностей.Лучший формат для веб-проектов — это простой в использовании значок веб-шрифта.

Веб-сайт: https://linearicons.com/
Формат и тип: SVG, Webfont, Icon font
Лицензия и цена: Бесплатно до $ 59, Common Creative License

Источник изображения: https : //linearicons.com/

Linear Icon pack — один из самых популярных и лучших наборов иконок для личных или коммерческих целей. Пакет линейных значков доступен как в бесплатной, так и в премиальной версиях. Бесплатная версия этого замечательного набора значков распространяется под лицензией Creative Common.Существуют также различные пакеты, которые вы можете выбрать в соответствии с вашими потребностями, например, Desktop Package.

Основные характеристики :

  • CloudFront CDN;
  • доступна бесплатная версия;
  • имеет разные форматы: SVG, PDF, Webfont.

Веб-сайт: https://feathericons.com/
Формат и тип: SVG, Webfont, Iconfont
Лицензия и цена: Бесплатно, Лицензия MIT

Источник изображения: https: // fedicons.com /

Feather — один из самых популярных наборов иконок с открытым исходным кодом. Это значки с открытым исходным кодом, созданные в сетке 24X24. Иконки доступны в формате SVG. Он находится под лицензией Массачусетского технологического института, и в нем содержится около 250+ значков с открытым исходным кодом.

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

Веб-сайт: https://www.iconfinder.com/
Формат: SVG, PNG, ICO, Marketplace
Лицензия и цена: От 9 до 49 долларов в месяц

Источник изображения: https: / / www.iconfinder.com/

Iconfinder — один из самых популярных ресурсов иконок в сети. Он предлагает более 4 миллионов значков, предоставляя пользователям множество вариантов поиска, включая формат значков, цену, размер, фон и т. Д. Существует несколько ежемесячных планов оплаты — от 9 до 49 долларов. Вы также можете выбрать систему «плати по мере использования».

Файлы значков доступны в форматах SVG, PNG, ICO, ICNS и Adobe Illustrator, а их размеры варьируются от 16 × 16 до 512 × 512. Вы также можете поработать с некоторыми из лучших дизайнеров сайта, если не можете найти что-то, что вам нравится, или просто хотите, чтобы пользовательские значки были разработаны специально для вас и вашего бренда.

Ключевые особенности:

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

Веб-сайт: https://thenounproject.com/
Формат и тип: SVG, PNG, Marketplace
Лицензия и цены: Creative Commons License, От $ 39.99

Источник изображения: https: // тоунпроект.com /

The Noun Project предлагает одну из самых больших библиотек иконок, доступных в сети. Большинство значков этого сайта доступны в форматах SVG и PNG, а также в черном и белом стилях.

Библиотека сайта состоит из файлов значков, разработанных различными независимыми дизайнерами. Это место, где создатели и творческие профессионалы могут вместе продавать свои проекты и находить, казалось бы, бесконечную библиотеку значков премиум-класса.

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

Ключевые особенности:

  • более 150 000 иконок;
  • форматы SVG, PNG;
  • средства поиска и обнаружения;
  • Creative Common License с дополнительными опциями;
  • бесплатные и платные варианты загрузки;
  • новых иконок загружаются почти ежедневно.

Веб-сайт: https://fontawesome.com/icons
Формат и тип: SVG, PNG, шрифт Icon, Marketplace
Лицензия и цена: SIL OFL 1.1

Источник изображения: https: / /fontawesome.com/icons

Font Awesome — это наиболее часто используемый и самый популярный набор шрифтов для иконок. Это также значок, установленный по умолчанию для команды при начальной загрузке. Он также доступен в виде значков SVG среди других форматов. Лицензия открыта и бесплатна для всего, коммерческого или личного.

Каждый значок полностью масштабируется и поддерживается непосредственно в CSS. Вы можете изменять цвета, тени, градиенты фона и многое другое, используя чистый CSS3. Еще одна причина использовать эту библиотеку заключается в том, что она полностью оптимизирована и не имеет проблем с совместимостью, поскольку вообще не требует JavaScript.

Ключевые особенности:

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

Веб-сайт: https://lineicons.com/
Формат и тип: SVG, веб-шрифт, шрифт Icon
Лицензия и цена: Бесплатно

Источник изображения: https://lineicons.com /

LineIcons также предоставляет бесплатный CDN с понятной документацией, которая упрощает начало работы.

Этот набор значков полностью бесплатный и содержит более 450 линейных значков. Он охватывает все необходимые для проекта значки из разных категорий. LineIcons также предоставляет бесплатный CDN и понятную документацию, чтобы легко начать работу.Он поставляется с двумя различными масштабируемыми пакетами — WebFonts и файлами SVG, которые вы можете использовать в зависимости от потребностей вашего проекта.

Ключевые особенности:

  • 450+ бесплатных иконок,
  • файлов SVG,
  • готовых веб-шрифтов,
  • бесплатных CDN.

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

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

Надеемся, эта статья поможет вам выбрать наиболее подходящее решение для ваших нужд.

В Flatlogic мы разрабатываем веб-шаблоны и шаблоны для мобильных устройств. Мы вошли в топ-20 компаний по веб-разработке из Беларуси и Литвы. За последние годы мы успешно реализовали более 50 крупных проектов для небольших стартапов и крупных предприятий.
Шаблоны Flatlogic
Примеры использования Flatlogic

Вот короткое видео о шаблонах Flatlogic, услугах веб-разработки и партнерской программе.

SVG-иконок — Готовые к использованию SVG-иконки для Интернета.







20 мест, где можно получить бесплатные значки веб-сайтов

Не знаете, где искать лучшие бесплатные значки веб-сайтов? Ваш поиск заканчивается здесь! Читайте список лучших мест для бесплатных веб-иконок, которые вы можете скачать сегодня.

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

Загрузите Justinmind для культового веб-дизайна с идеальным пиксельным дизайном

Скачать бесплатно

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

Тогда у вас есть множество доступных форматов файлов. Большой вопрос здесь в том, что вам подходит? Наиболее распространенными предлагаемыми форматами являются PNG и SVG. Многие из них также доступны в виде фрагментов HTML-кода. PNG — это в основном растеризованные изображения, и если они не подходят по размеру для текущего проекта, вы потеряете качество при их изменении. SVG имеют тенденцию попадать в золотую середину, поскольку они полностью масштабируемы, что дает вам возможность регулировать размер по мере необходимости в вашем любимом инструменте прототипирования.

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

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

Вы обнаружите, что значки на Streamline Icons бывают трех разных типов или «веса». Отмечена разница между их светлыми, обычными и жирными значками, более светлые — более геометрические и минималистичные, в отличие от жирных значков с глифами, которые больше напоминают рекомендации Apple по человеческому интерфейсу.

Вы можете загружать значки с этого сайта в пакетах в формате SVG, PNG или PSD, и существует не менее 10 500 разновидностей значков трех разных весов, разделенных на 53 категории.Вы обязательно найдете здесь то, что вам нужно!

Загружаемый формат: SVG, PNG и PSD

Flat Icon, как следует из названия, — отличное место, где можно остановиться за бесконечными списками бесплатных плоских иконок. Предлагается около 60 категорий и тысячи бесплатных значков веб-сайтов для загрузки в каждой, поэтому мы говорим, что вы не ошибетесь.

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

Если вы ищете идеальный набор плоских иконок для своего веб-сайта, даже если он ориентирован на нишевый рынок, Flat Icon поможет вам.

Загружаемый формат: SVG и PNG

Iconfinder имеет более 17 200 бесплатных иконок для веб-сайтов, которые ждут вас для загрузки. Лучшая часть? Все они векторные, а это значит, что вам просто нужно скачать и масштабировать их в соответствии с дизайном интерфейса вашего веб-сайта.

Еще одна интересная особенность этого веб-сайта — бесплатный редактор изображений, который позволяет вам изменять размер, перекрашивать и даже перерисовывать каждое изображение по своему вкусу перед загрузкой в ​​формате SVG — приятное прикосновение!

Загружаемый формат: SVG

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

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

Загружаемый формат: SVG

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

Среди доступных категорий: веб-приложение, бренд, направленная (для навигации), социальная, медицинская, погода, спорт, путешествия, образование и многие другие. Вы можете загрузить каждый значок как отдельный файл SVG или как код разметки.

Загружаемый формат: SVG и HTML

Вы можете рассматривать Iconstore как источник бесплатных иконок для веб-сайтов. На этом веб-сайте собрана коллекция лучших бесплатных веб-иконок.

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

Однако вы обнаружите, что не все бесплатные значки веб-сайтов на этом сайте можно загрузить в одном и том же формате. Некоторые из них доступны в виде наборов SVG, а другие можно загрузить только в формате JPG или PNG, которые вы можете изменять в Photoshop.

Загружаемый формат: SVG, PNG и PNG

Boxicons дает вам доступ к 1066 бесплатным значкам веб-сайтов в формате SVG, которые можно загрузить за секунду в виде полного пакета или по отдельности. Эти простые плоские значки и глифы содержат как функциональные, так и забавные элементы, каждый из которых имеет обычный геометрический рисунок или жирный формат глифов.

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

Загружаемый формат: SVG

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

В дополнение к пакету SVG они также делают доступным для вас соответствующий HTML-код, просто щелкая каждый бесплатный веб-значок.

Загружаемый формат: SVG и HTML

Иконки, которые вы можете найти на Тильде, просты, минималистичны и идеально подходят для любого типа веб-сайта и практически любой ситуации. Без заливки и геометрический дизайн, большинство этих значков представлены в 2D, а некоторые в 3D, в зависимости от категории, что подводит нас к одному из самых привлекательных аспектов этого веб-сайта — предлагается 43 поразительные категории!

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

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

Загружаемый формат: SVG

Fontello предоставляет интересный список бесплатных значков веб-сайтов для использования в качестве шрифтов значков в любом месте вашего веб-сайта или мобильного веб-приложения.Фактически, у вас есть доступ к целому ряду различных наборов иконок от разных авторов, таких как Fontelico, Font Awesome, Modern Pictograms, Typicons и многих других.

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

Загружаемый формат: SVG

Если вам нужны значки брендов для своего веб-сайта, Simple Icons предоставит вам исчерпывающий список бесплатных значков для различных компаний и продуктов.Вы можете загружать их по отдельности в виде векторных файлов, каждый в наборе с цветовой кодировкой, чтобы вы могли легко просматривать логотип бренда, который вам нужен, или просто выполнять поиск по бренду с помощью предоставленной панели поиска.

Эти бесплатные фирменные значки веб-сайтов отлично подходят, если вы хотите иметь возможность связывать своих пользователей с внешним веб-сайтом или приложением, иметь возможность делиться своим контентом через социальные сети или если вы просто хотите, чтобы значки отображали определенное программное обеспечение на вашей веб-странице. К таким значкам относятся все, от Hubspot, Microsoft PowerPoint и Slack до Tinder, Instagram и Tesla.Вы обязательно найдете то, что вам нужно!

Загружаемый формат: SVG

Line Icons предлагает более 450 бесплатных иконок для вашего следующего проекта, которые вы можете загрузить в виде полного пакета SVG. Этот пакет содержит множество различных категорий бесплатных значков веб-страниц, в дополнение к значкам настольных приложений и значкам мобильных устройств.

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

Загружаемый формат: SVG

Если вы ищете разнообразия, то 365psd — идеальный веб-сайт. Благодаря широкому выбору наборов, варьирующихся от сплошных глифов и простых монохромных значков до трехмерных мультипликационных глифов, это один из сайтов с самым разнообразным выбором бесплатных значков для веб-сайтов.

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

Загружаемый формат: SVG, PSD и EPS

Если вы ищете что-то немного необычное и красочное, чтобы привлечь внимание пользователей, почему бы не попробовать коллекцию Ballicon из 36 круглых плоских значков с легким градиентом?

Первоначально разработанный PixelBuddha и выпущенный для читателей Smashing Magazine, этот пакет бесплатных значков веб-сайтов полностью бесплатен для личного коммерческого использования при условии, что вы укажете соответствующую атрибуцию.

Загружаемый формат: SVG, PNG и PSD

Feather Icons — отличное место для тех, кто ищет красивые простые бесплатные иконки для веб-сайтов.Все значки на Feather Icons имеют открытый исходный код, из которых можно выбрать более 280. Вы можете скачать все эти бесплатные иконки в виде полного пакета векторных изображений или по отдельности, по вашему выбору.

Основная привлекательность этих значков — их минималистичный упрощенный дизайн, который полностью открыт для редактирования.

Загружаемый формат: SVG

Если вы ищете разнообразия, Interfacer поставляется с различными пакетами загружаемых значков SVG. Эти пакеты бесплатных иконок для веб-сайтов были созданы разными авторами и размещены на этом сайте бесплатно для коммерческого использования.Вы можете думать об этом как о чем-то вроде Dribbble для иконок.

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

Загружаемый формат: SVG

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

Они также доступны для загрузки в различных форматах, включая SVG и PNG, в дополнение к коду CSS. Они также предоставляют несколько полезных советов в виде руководств на своем веб-сайте о том, как редактировать свои значки с помощью Divi Builder. Нам нравятся эти ребята. Они полезны.

Загружаемый формат: SVG, PNG и CSS

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

Paulolyslager.com позволяет бесплатно загрузить большой набор этих бесплатных значков веб-сайтов в форматах SVG и PNG.

Загружаемый формат: SVG и PNG

На Speckyboy вы можете загрузить 100 иконок SVG, специально разработанных Freekpik для использования в ваших проектах веб-дизайна. Вы можете масштабировать их, редактировать и раскрашивать в соответствии с вашими целями.

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

Загружаемый формат: SVG

И последнее, но не менее важное: если вы хотите привнести немного черного юмора на свой веб-сайт, почему бы не попробовать набор Nasty Icons?

Вы можете найти 45 бесплатных иконок для веб-сайтов, которые можно загрузить в виде файлов AI и EPS, которые передают забавные геометрические мультфильмы или приклеивают рисунки людей, которых кипятят заживо, теряют голову или падают с лестничных пролетов.На случай, если вам понадобится что-то в этом роде!

Загружаемый формат: AI и EPS

Создавайте отличные веб-сайты с Justinmind

Если вы типичный владелец Justinmind, наш ассортимент наборов пользовательского интерфейса позволит вам бесплатно поиграть мускулами веб-дизайна.

Если вы ищете больше, чем бесплатные веб-иконки, почему бы не попробовать некоторые из наборов пользовательского интерфейса Justinmind? На нашей странице наборов пользовательского интерфейса вы найдете нашу библиотеку веб-каркасов, в которой есть значки и компоненты, специально предназначенные для веб-дизайна, а также полный набор компонентов и значков пользовательского интерфейса Font Awesome.

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

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

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

SVG, значки и все забавные вещи, которые мы можем с ними делать

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

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

Вот код для добавления значков на ваш сайт:

  

  

Если браузер не поддерживает значок SVG, он проигнорирует объявление первого элемента ссылки и перейдет ко второму. Это гарантирует, что все браузеры, поддерживающие значки, смогут насладиться этим опытом.

Вы также можете заметить альтернативное значение атрибута для нашего объявления rel во второй строке. Это программно сообщает браузеру, что значок с форматом файла, который использует .ico , специально используется в качестве альтернативного представления.

После значков следует строка кода, которая загружает другое изображение SVG, которое называется safari-pinned-tab.svg . Это сделано для поддержки закрепленных вкладок Safari, которые существовали до того, как в других браузерах появилась поддержка значков SVG.Вы можете добавить сюда дополнительные файлы, чтобы улучшить свой сайт для различных приложений и сервисов, но об этом чуть позже.

Вот более подробная информация о текущем уровне поддержки значков SVG:

Настольный компьютер
Chrome Firefox IE Edge Safari
80 41 Нет 80 TP
Android Chrome Android Firefox Android iOS Safari
92 Нет Нет 14.5-14,7

Почему именно SVG?

Вы можете спросить, зачем это нужно. Формат файла .ico существует всегда и может поддерживать изображения размером до 256 × 256 пикселей. Вот вам три ответа.

Легкость авторинга

Создать файлов .ico — это настоящая проблема. Этот файл является проприетарным форматом, используемым Microsoft, а это означает, что вам потребуются специальные инструменты для их создания. SVG — это открытый стандарт, что означает, что вы можете использовать их без дополнительных инструментов или привязки к платформе.

Ориентация на будущее

Retina? 5к? 6к? Когда мы используем SVG-файл, не зависящий от разрешения, для значка значка, мы гарантируем, что наши значки будут четкими на будущих устройствах, независимо от размера их дисплеев.

Производительность
SVG

обычно представляют собой очень маленькие файлы, особенно по сравнению с их аналогами из растровых изображений — тем более, если вы их заранее оптимизируете. Используя только значок 16 × 16 пикселей в качестве альтернативы для браузеров, не поддерживающих SVG, мы обеспечиваем комбинацию, которая пользуется высокой степенью поддержки с меньшим размером файла для загрузки.

Это может показаться немного экстремальным, но когда дело доходит до веб-производительности, каждый байт на счету!

Уловки

Еще одна замечательная вещь в SVG — это то, что мы можем встраивать CSS прямо в него. Это означает, что мы можем делать забавные вещи, например динамически настраивать их с помощью JavaScript, при условии, что SVG объявлен встроенным, а не встроен с использованием элемента img .

  
<стиль>
путь {fill: # 272019; }


  

Поскольку значки SVG встроены с использованием элемента link , их нельзя изменить с помощью JavaScript. Однако мы можем использовать такие вещи, как эмодзи и медиа-запросы.

эмодзи

Леа Веру пришла в голову гениальная идея использовать эмодзи внутри элемента SVG text , чтобы создать быстрый значок с прозрачным фоном, который выдерживает небольшие размеры.

В ответ Крис Койер создал изящную небольшую демонстрацию, которая позволяет вам поэкспериментировать с концепцией.

Поддержка темного режима

И Томас Штайнер, и Матиас Биненс независимо друг от друга наткнулись на идею, что вы можете использовать медиа-запрос prefers-color-scheme для обеспечения поддержки темного режима. Эта работа основана на исследованиях Джейка Арчибальда SVG и медиа-запросов.

  
<стиль>
путь {fill: # 000000; }
@media (prefers-color-scheme: dark) {
путь {fill: #ffffff; }
}

<путь d = "M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-. 367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z "fill-rule =" ненулевое "/>
  

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

Другие медиа-запросы

Поддержка темного режима заставила меня задуматься: если SVG могут поддерживать prefers-color-scheme , что еще мы можем с ними делать? Хотя поддержки мультимедийных запросов уровня 5 еще может не быть, вот несколько идей, которые стоит рассмотреть:

Макет того, как могут работать эти настройки на основе медиа-запросов.

Сохраняйте четкость

Еще один важный аспект хорошего дизайна значков — убедиться, что они хорошо выглядят в небольшой области вкладок браузера.Секрет в том, чтобы выровнять пути векторного изображения до пиксельной сетки — ориентира, который компьютер использует для превращения математики SVG в растровое изображение, которое мы видим на экране.

Вот упрощенный пример квадратной формы:

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

Положение векторной точки в пиксельной сетке можно отрегулировать с помощью программы редактирования векторов, такой как Figma, Sketch, Inkscape или Illustrator.Эти программы также экспортируют SVG. Чтобы настроить положение векторной точки, выберите каждый узел с помощью инструмента точного выбора и перетащите его в нужное положение.

Некоторые более сложные значки, возможно, придется упростить, чтобы они хорошо смотрелись при таком маленьком размере. Если вы ищете хорошее руководство по этому вопросу, Джереми Фрэнк написал действительно хорошую статью из двух частей в Vidget.

Сделайте лишнюю милю

Помимо значков, существует множество различных (и, к сожалению, проприетарных) способов использования значков для улучшения восприятия.К ним относятся такие вещи, как вышеупомянутый значок закрепленной вкладки для Safari¹, развертывание приложения чата, закрепленная плитка меню «Пуск» Windows, предварительный просмотр в социальных сетях и средства запуска домашнего экрана.

Если вы ищете отличное место для начала работы с такими улучшениями, мне действительно нравится realfavicongenerator.net.

Это много, но гарантирует надежную поддержку.

Забавная вещь об истории значка: Internet Explorer был первым браузером, который поддерживал их, и они были обнаружены в 11-м часу разработчиком по имени Бхарат Шьям:

Как гласит история, однажды поздно вечером Шьям работал над своей новой функцией фавикона.Он позвал младшего менеджера проекта Рэя Сана, чтобы он посмотрел.

Шьям прокомментировал: «Это хорошо, правда? Отметить? », Запрашивая разрешение на проверку кода в кодовой базе Internet Explorer, чтобы его можно было выпустить в следующей версии. Sun не особо задумывался об этом, функция была классной и явно дала IE преимущество. Поэтому он сказал Шьяму добавить его. И точно так же значок появился в Internet Explorer 5, который впоследствии стал одним из крупнейших выпусков браузеров, которые когда-либо видел Интернет.

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

Из книги Джея Хоффмана «Как мы получили фавикон»

Я рад видеть, что платформа бросает немного любви на значки.Они долгое время были одной из моих любимых маленьких деталей дизайна, и я рад, что они все больше реагируют на потребности пользователей. Если у вас есть момент, почему бы не внедрить в свой проект значок SVG, как это сделал Бхарат Шьям еще в 1999 году.


Последняя коллекция бесплатных SVG-иконок и иллюстраций

Сегодня мы говорим о SVG (масштабируемая векторная графика), использовании SVG на веб-сайтах и ​​бесплатных иконок SVG.

SVG — это формат XML для векторной графики, мы можем определять формы, вводя текст в документ SVG.Обычно SVG позволяет нам управлять векторной графикой в ​​вашем HTML. Вы можете использовать SVG в качестве изображений, не используя формат SVG в HTML-документе, или можете ввести код SVG непосредственно в свой HTML-документ.

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

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

Еще одним важным преимуществом SVG является то, что им можно легко управлять с помощью CSS, например, с помощью антиатомов при наведении, Size. SVG действительно удобен для печати, поскольку это векторная графика.

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

Просмотрите огромную коллекцию бесплатных значков SVG, которые можно использовать бесплатно. Иконок много, но мы выбрали лучшие из них.

Библиотеки SVG ICONS

Куликон

Скачать

Иконуар

Скачать

Иконки веб-сервисов Amazon

Скачать

CSS.gg

Источник

Библиотека иконок Orion

Скачать

Иконки SVG

Скачать

Акарикон

Скачать

Иконки Potlab

Скачать

Векторные иконки Covid

Скачать

Значки Radix

Скачать

Иконки кузницы

Скачать

Значок Polaris

Скачать

FA Иконки

Источник

Healthicons

Скачать

Монохромные иконки

Скачать

Маджестикон

Скачать

Iconhub

Скачать

ЗНАЧКИVG

Источник

Zwicon

Источник

Nataicons

Скачать

Gov Иконки

Скачать

Оликонс

Скачать

Угловые иконки

Скачать

IconPark

Скачать

Blobsicons

Скачать

Иконы с люминофором

Скачать

Иониконы

Скачать

Адаптивные иконки

Скачать

Буханка — Библиотека анимированных иконок SVG

Скачать

Инди-иконы

Скачать

Эмблемиконы

Скачать

Иконки Google Fonts

Скачать

Базы

Скачать

Neuicons

Скачать

Тильда Иконки

Скачать

Teenyicons

Скачать

Системные символы

Скачать

Иконки Tabler

Скачать

Библиотека иконок SVG для начальной загрузки

Скачать

Ремиксикон

Скачать

Octicons

Источник

Супер крошечные иконки

Скачать

Toicon

Скачать

LineIcons 2.0

Скачать

Градиентация иконок SVG

Скачать

Плоские иконки в материальном стиле

Скачать

Иероглиф майя SVG Иконки

Скачать

Line Awesome

Скачать

Героиконы

Скачать

Джем Иконки

Скачать

Beedii Hand Drawn Emoji Шрифт

Скачать

Ikonate — Бесплатные иконки SVG

Скачать

Vzy Иконы

Источник

Evericons

Источник

Байт Иконки

Скачать

SVGBox

Скачать

Злые иконы

Скачать

Иконы изометрические маркеры

Скачать

Ева Иконки

Скачать

Иконы с перьями

Скачать

Коллекция иконок SVG

Скачать

Боксиконы

Скачать

Струны

Скачать

Иконки четкости

Скачать

Entypo

Скачать

Игровые иконки

Скачать

Значки материала UI

Скачать

Линейные значки

Скачать

Simpleicon — бесплатные простые иконки SVG

Скачать

Яркий.js Иконки

Скачать

Риволикон

Скачать

Библиотека значков SVG

Источник

IconBros

Источник

Иконки EOS

Скачать

FontTonicons

Скачать

Иконки системы углеродного дизайна

Источник

Иконки Themify

Скачать

Iconic

Скачать

Основные иконки

Скачать

Hawcons

Скачать

Иконки дизайна материалов

Скачать

Приложение Svelte

Источник

Иконки — Векторные иконки

Скачать

Дрипиконы

Скачать

Иконки векторные линии

Скачать

Маки

Скачать

Иконки дизайна материалов

Скачать

Люцид

Источник

Zondicons

Скачать

Простые иконки

Скачать

Откройте Iconic Icons

Скачать

Linea Icon

Скачать

Иконки дизайна React Material

Скачать

Твердые значки чернил кальмара

Скачать

Социальные иконки SVG

Скачать

Иконы Metrize

Скачать

Репо SVG

Источник

Бесконечные иконки

Скачать

Keyicons

Скачать

Иконки флагов

Скачать

Иконки Mobirise

Скачать

Девиконы

Скачать

Символы

Скачать

Стандарт

Скачать

Иконки Pathlove

Скачать

использовать Анимации

Скачать

Типиконы

Скачать

Humbleicons

Скачать

Дженериконы

Скачать

мкм

Скачать

Gonzocons

Скачать

Иконки карты

Скачать

Иконы Aegis

Источник

SVG порно (SVG логотипы)

Источник

Комплект SVG

Источник

Иконки Angular Bootstrap

Скачать

Таблички

Источник

Фезерикон

Источник

Drawic

Источник

Иконки криптовалюты

Источник

LibreIcon

Источник

Иконки покемонов

Источник

Pixelarticons

Источник

Pixellove Simple Icons

Источник

Hola SVG

Источник

Icon Sweets

Источник

Наборы иконок SVG

Seo Иконки

Скачать

Основные значки пользовательского интерфейса

Скачать

Иконки еды и отдыха

Скачать

Ricon v.1

Скачать

Значки достопримечательностей

Скачать

Значки больших данных

Источник

Sensa Emoji Icons

Источник

Весенние векторные иконки

Скачать

Иконы парикмахерской

Скачать

Бейсбол векторные иконки

Скачать

Программное обеспечение Mansion Icons

Скачать

Градиентные плоские иконки

Скачать

Набор иконок для оплаты

Скачать

Значки устройств

Скачать

Интернет-маркетинг и SEO иконки

Скачать

пикселей

Скачать

Хэллоуин тенистые иконы

Скачать

Comercily — Иконки для электронной торговли

Скачать

Чрезвычайные ситуации векторные иконки

Скачать

Material Design Simple Line SVG Иконки

Скачать

Значки типов файлов

Скачать

Электронные иконки

Скачать

Иконки мотивации

Скачать

Бесплатный набор иконок (AI.EPS. ЭСКИЗ. SVG. PNG. ВЕБ-ШРИФТЫ)

Скачать

Иконки для информирования о коронавирусе

Скачать

Казино векторные иконки

Скачать

Значки веб-интерфейса

Скачать

Иконки векторные события

Скачать

Значки экстренной помощи, связанные с коронавирусом

Скачать

Иконки Free Line

Скачать

Векторные иконки творческого процесса

Скачать

Парниковые векторные иконки

Скачать

Пещерные иконы

Скачать

Скачать

400+ бесплатных иконок

Скачать

Иконки пользовательского интерфейса

Скачать

Бесплатные адаптивные иконки

Скачать

Векторные иконки безопасности

Скачать

Праздники векторные иконки

Скачать

Иконки для умного дома

Скачать

Маркетинговый контент, красочные значки

Скачать

Иконки для совместной работы

Скачать

Иконы дискотеки

Скачать

Иконки линии материального дизайна

Скачать

Универсальные иконки SVG

Скачать

Бесплатные иконки музыкальных инструментов

Скачать

Векторные иконки блокчейн (PNG, SVG)

Скачать

Иконки бесплатного онлайн-обучения (PNG, SVG)

Скачать

Глянцевые значки интерфейса

Скачать

Векторные иконки с адаптивным дизайном (PNG, SVG)

Скачать

Иконки погоды

Скачать

Образовательные иконки

Скачать

Иконки Интернет-маркетинга

Скачать

Значки местоположения

Скачать

Бесплатные иконки для хлебобулочных изделий

Скачать

Набор иконок деньги

Скачать

Чистый сахар — иконки SVG бесплатно

Скачать

Бесплатный набор иконок Flato SVG (PSD, AI, SVG)

Скачать

Бесплатные иконки веб-дизайна

Скачать

Набор иконок SVG Capitalist Food and Drinks (PSD, AI, SVG, PNG, EPS)

Скачать

Бесплатные базовые иконки (SVG)

Скачать

Иконки с цветными линиями (SVG, PNG)

Скачать

Иконки от Seodity Team

Скачать

Линеконы версии 2

Скачать

Бесплатные иконки электронной коммерции (PNG, SVG)

Скачать

Бесплатные значки поддержки пользователей SVG

Скачать

Бесплатные значки устойчивой энергетики

Скачать

Иконки интерфейса «Закат»

Скачать

Иконки для водных видов спорта

Скачать

Бесплатные плоские иконки для электронной коммерции

Скачать

Бесплатные рождественские иконки

Скачать

Ежедневные основные значки

Скачать

Бесплатные иконки Apple

Скачать

Иконки интерфейса бесплатного пользовательского интерфейса

Скачать

Трафареты для управления энергопотреблением Enapter

Скачать

Скачать

Высококачественные значки бизнес-аналитики

Скачать

Иконки графического дизайна

Скачать

Скачать

Рождественские и зимние иконы

Скачать

Смешные аватары высокого качества

Скачать

Адаптивные иконки веб-дизайна

Скачать

Библиотеки

Бесплатные иконки Summertime

Скачать

Спортивные иконки

Скачать

Космические иконки

Скачать

Бесплатные социальные иконки

Скачать

Иконки электронной коммерции

Скачать

Бесплатные социальные иконки

Скачать

Весенние иконы

Скачать

Хэллоуин иконки

Скачать

Иконы ко Дню святого Валентина

Скачать

Иконки для бизнеса и денег

Скачать

Иконы ко Дню святого Валентина высокого качества

Скачать

Значки безопасности в Интернете

Скачать

Иконки веб-навигации

Скачать

Значки устойчивой энергетики

Скачать

Nucleo Free Food Иконки

Скачать

Иконки веб-хостинга и технической поддержки

Скачать

Минимальные бесплатные иконки (SVG, EPS, PNG)

Скачать

Иконки смузи

Скачать

Иконки UI / UX

Скачать

Простые линейные иконки

Скачать

Иконы ко Дню Святого Патрика

Скачать

Набор иконок веб-интерфейса

Скачать

Индустриальные иконки в стиле iOS7

Скачать

Иконки Биткойн

Скачать

100 бесплатных иконок

Скачать

Иконки штрихов

Скачать

Бесплатные иконки пузырей

Скачать

Значки штрихов

Скачать

Набор иконок Ballicons 2

Скачать

Бесплатные иконки для кухни / ресторана

Скачать

Сердце Иконы

Скачать

Ранмик Иконки

Скачать

Векторные иконки типов файлов

Скачать

Иконы ко дню святого Валентина

Скачать

Капитан векторные иконки

Скачать

Обведенные значки

Скачать

Гадкие иконы

Скачать

Dentist Icons

Скачать

Linecons

Скачать

Иконки служб SEO

Скачать

Publicons

Скачать

Набор иконок Streamline

Скачать

80-штрих-иконки-psd-ai-webfont /

Крошечные иконки

Скачать

Маленькие значки

Скачать

Метеоконы

Скачать

Иконки градиентной музыки

Скачать

Плоский набор иконок

Скачать

MFG Labs Значок

Скачать

Мммиконы

Скачать

Рождественские векторные бесплатные SVG-иконки

Скачать

Транспортные средства и значки

Скачать

Бесплатные иконки в стиле линий

Скачать

Birply Иконки

Скачать

Набор иконок для праздников и путешествий

Скачать

COVID-19 Иконки

Скачать

Иконки киберспорта

Скачать

Скачать

Япония Иконы

Скачать

Бесплатные иконки для приложений Windows 10

Скачать

Бесплатные иконки для гастрономии

Скачать

Основные смешанные веб-иконки

Скачать

Смайлики

Скачать

Деньги и банковские символы

Скачать

Иконки дизайна материалов

Скачать

Адаптивные линейные иконки

Скачать

Сенсорные иконки

Скачать

Универсальные темы Векторный Icon

Скачать

Универсальные иконки

Скачать

Иконки с гелием

Скачать

Точечные и квадратные цветные значки

Скачать

Иконки зимних видов спорта

Скачать

Диспетчер иконок SVG

Набор иконок

Скачать

Иллюстрации

Pixeltrue Векторные иллюстрации

Скачать

Humaaans

Скачать

Дизайн Woobro

Скачать

Ира Дизайн

Скачать

Набор иллюстраций для образования и онлайн-обучения

Скачать

Масштаб

Скачать

Отрисовка иллюстраций

Скачать

Illustra

Скачать

Многопиксельные иллюстрации

Скачать

404 иллюстрации

Скачать

Библиотека иллюстраций Ara и создатель

Скачать

Иллюстрации

Скачать

Рисованная иллюстрация растения

Скачать

Лукашадам Иллюстрации

Скачать

Иллюстрации удаленной работы

Скачать

Retroooo Народ

Скачать

Vectorove

Источник

Frontliner Heroes — Иллюстрации Covid 19 (AI, PNG, SVG)

Скачать

Иллюстрации стартапистов

Скачать

Пальмы

Скачать

Оптимизация лабораторных иллюстраций

Скачать

Иллюстрации рабочего пространства дизайнера

Скачать

Иллюстрация гаджетов

Скачать

Аватары разнообразия

Скачать

Bulbman Art

Скачать

Smash Иллюстрации

Скачать

Цветочные иллюстрации

Скачать

Обтекаемые иллюстрации

Скачать

Яркие иллюстрации

Скачать

Открытые дудлы

Скачать

Delesign

Скачать

Набор иллюстраций

Скачать

Хорошие иллюстрации

Скачать

Изометрические иллюстрации

Скачать

Сцены с плоским кругом

Скачать

По произведениям Freepik

Скачать

Иллюстрации

Скачать

Illustraly Work from Home Иллюстрации

Скачать

бесплатных иконок в SVG и PNG

Бесплатные иконки SVG со сверхбыстрым поиском и бесплатной кока-колой.Создан для развлечения с помощью Icons8.

Иконки Facebook

  • Значок «Нравится» в Facebook
  • Значок «Нравится» в Facebook
  • Значок «Нравится» в Facebook
  • Значок «Нравится» в Facebook
  • Значок «Нравится» в Facebook
  • Значок «Нравится» в Facebook
  • Значок «Нравится» в Facebook
  • Значок «Нравится» в Facebook
  • Значок Facebook
  • Значок Facebook

Иконки телефона

  • Значок гарнитуры
  • Значок гарнитуры
  • Значок гарнитуры
  • Значок гарнитуры
  • Значок гарнитуры
  • Значок гарнитуры
  • Значок гарнитуры
  • Значок гарнитуры
  • Значок гарнитуры
  • Значок гарнитуры

Иконки YouTube

  • Значок YouTube 2
  • Значок YouTube 2
  • Значок YouTube 2
  • Значок YouTube 2
  • Значок YouTube 2
  • Значок YouTube 2
  • Значок YouTube 2
  • Значок YouTube 2
  • Значок YouTube 2
  • Значок YouTube 2

Иконки веб-сайтов

  • Значок веб-сайта
  • Значок веб-сайта
  • Значок веб-сайта
  • Значок веб-сайта
  • Значок веб-сайта
  • Значок веб-сайта
  • Значок веб-сайта
  • Значок веб-сайта
  • Значок веб-сайта
  • Значок веб-сайта

Google Иконки

  • Значок веб-поиска Google
  • Значок веб-поиска Google
  • Значок веб-поиска Google
  • Значок веб-поиска Google
  • Значок веб-поиска Google
  • Значок веб-поиска Google
  • Значок веб-поиска Google
  • Значок веб-поиска Google
  • Значок веб-поиска Google
  • Значок веб-поиска Google

Иконки Instagram

  • Instagram старый значок
  • Instagram старый значок
  • Instagram старый значок
  • Instagram старый значок
  • Instagram старый значок
  • Instagram старый значок
  • Instagram старый значок
  • Instagram старый значок
  • Instagram старый значок
  • Instagram старый значок

Значки электронной почты

  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты

Twitter Иконки

  • Значок Twitter
  • Значок Twitter
  • Значок Twitter
  • Значок Twitter
  • Значок Twitter
  • Значок Twitter
  • Значок Twitter
  • Значок Twitter
  • Значок Twitter
  • Значок Twitter

E Иконки электронной почты

  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты
  • Значок электронной почты

Иконки электронной почты

  • Значок почты
  • Значок почты
  • Значок почты
  • Значок почты
  • Значок почты
  • Значок почты
  • Значок почты
  • Значок почты
  • Значок почты
  • Значок почты
.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Авторское право © 2024 Es picture - Картинки
top