Сайт

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

28.01.2023

Содержание

Более 500 совершенно бесплатных и свежих иконок для Ваших новых и будущих веб — сайтов

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

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

Так же рекомендую посмотреть Вам прошлые подборки с иконками:

  • Самая свежая подборка за 2013 год различных IU элементов в различных форматах (PSD, PNG, Ico.)
  • Совершенно новые и бесплатные иконки для сайта разных форматов и тематик
  • Скачать бесплатно множество разнообразных иконок в разных форматах (ICO, PSD и PNG)
  • Множество различных и бесплатных PSD исходников для веб-дизайнеров за 2012 год. Страница в закладки
  • Скачать бесплатные мини иконки для Ваших сайтов и веб-проектов

Социальные иконки в виде марок

Скачать

Разноцветные иконки закладок

Скачать

Иконки социальных сетей нарисованных от руки

Скачать

Прямоугольные иконки социальных закладок

Скачать

36 бесплатных винтажных иконок социальных сетей

Скачать

Несколько красивых квадратных иконок с закладками

Скачать

Круглые иконки закладок для тёмных сайтов

Скачать

Маленькие и квадратные иконки социальных сетей

Скачать

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

Скачать

Классные красные иконки в Метро стиле

Скачать

Ещё несколько монохромных иконок белого цвета

Скачать

E-Commerce иконки

Скачать

Набор иконок для школьника

Скачать

Экологические иконки

Скачать

Классные иконки для фотографа

Скачать

Летние и пляжные иконки

Скачать

Несколько классных иконок для сайта

Скачать

Очень красивые иконки для сайта

Скачать

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

Скачать

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

Скачать

Красивые иконки в светлом стиле

Скачать

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

Скачать

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

Скачать

30 красивых системных иконок

Скачать

Глиф — иконки — это иконки сделанные в PSD формате, которые можно редактировать в Фотошопе без потери качества.

Светлые глиф иконки на сайт

Скачать

Тёмные глиф иконки для Вашего сайта

Скачать

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

Скачать

Маленькие пиксельные иконки

Скачать

Маленькие глиф иконки для интернет магазинов

Скачать

Множество монохромных глиф иконок

Скачать

Глиф иконки от руки на сайт

Скачать

Классные иконки в мини стиле

Скачать

Светлые иконки для тёмных сайтов

Скачать

Мини глиф иконки

Скачать

Ещё одни мини иконки на сайт

Скачать

Иконки для сайтов с тёмным дизайном

Скачать

Светлые глиф иконки

Скачать

Тёмные иконки для светлых сайтов

Скачать

50 тёмных иконок

Скачать

Чёрные глиф иконки для сайта

Скачать

Иконки Token

Скачать

350 векторных иконок

Скачать

Красивые серые иконки

Скачать

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

Скачать

Чёрные мини глиф иконки

Скачать

Иконки браузеров

Скачать

120 глиф иконок

Скачать

Где искать иконки для сайта: 20 лучших ресурсов

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

The Noun Project

The Noun Project — это огромная библиотека иконок, в которой их более 2 миллионов штук. Все эти иконки сделаны участниками.

icomonstr

iconmonstr — это библиотека значков, предлагающая более 4000 иконок, отсортированных в 300+ различных коллекций. Эта библиотека поддерживается всего одним человеком.

Good Stuff No Nonsense 

Good Stuff No Nonsense — это библиотека значков, которые нарисованы от руки.

Orion

Значки Line, Solid, Color & Flat с точным и унифицированным стилем. Приспосабливается к любому типу проекта с различным размером, цветом и разнообразием.

IcoMoon

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

Pictonic

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

icons8

100 000 значков и ежедневные обновления коллекции Icons8 трудно превзойти. Пользователи могут искать значки по тегам или просматривать более 50 различных тематических коллекций, чтобы найти графику, соответствующую их потребностям.

Flaticon

2 000 000+ бесплатных векторных иконок в формате SVG, PSD, PNG, EPS или в виде ICON FONT. Тысячи бесплатных иконок в крупнейшей базе бесплатных векторных иконок!

Font Awesome

Font Awesome, наверное, самая известная библиотека значков. 

iconscout

iconscout — это коллекция миллионов иконок в каждой возможной категории. Пользователи имеют возможность создавать и делиться своими собственными значками и создавать коллекции.

IconFinder

Iconfinder в настоящее время является одной из крупнейших библиотек иконок с более чем 4 миллионами бесплатных и премиальных иконок. 

PixelLove

PixelLove с более чем 15 000 значков для платформ iOS и Android представляет собой коллекцию для дизайнеров, создающих мобильные сайты и приложения. Все значки доступны в различных размерах.

Streamline Icons

Более 10 500 иконок в трех разных размерах. 53 категории, 720 подкатегорий.

Grabhic Burger

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

Smashicons

Smashicons предлагает коллекцию с более чем 175 000 иконок в своей библиотеке. Однако, в отличие от некоторых других упомянутых библиотек значков, не все эти значки соответствуют одному и тому же стилю. 

pngtree

Всего за 3 коротких года Pngtree удалось накопить миллионы уникальных ресурсов графического дизайна. Среди них: иллюстрации, векторы, шаблоны, фоны и, самое главное, иконки.

Найдя значок, вы можете загрузить его в формате PNG или SVG с максимальным размером 512 × 512.

Iconshock

Профессиональная библиотека значков с более чем 400 наборами иконок в более чем 30 стилях. Помимо библиотеки из 2 миллионов иконок, Iconshock также специализируется на пользовательских стилях. 

Material Design Icons

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

Material Icons

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

freeicons

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

анимированных иконок | Font Awesome Docs

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

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

Перед началом работы

Убедитесь, что вы:

  • Настройте Font Awesome в своем проекте.
  • Знаком с основами добавления иконок Font Awesome.

Beat

Используйте анимацию fa-beat для увеличения или уменьшения значка. Это полезно для привлечения внимания или для использования со значками, ориентированными на здоровье / сердце.

Утилиты Beat

Утилита Подробная информация
-FA-FA-BEAT-SCALE Установите максимум.0019

Используйте анимацию fa-fade для визуального появления и исчезновения значка, чтобы незаметно (или не очень) привлечь внимание.

Fade Utilities

Утилита Подробная информация
-FA-FADE-opty СОЕДИНА САМОЕ НЕОБХОДИВА

Используйте анимацию fa-beat-fade , чтобы привлечь внимание путем визуального масштабирования и пульсации значка.

Утилиты Beat Fade

Утилита Подробная информация
-FA-BEAT-FADE-opty. SET LOWEST OPAULED Значение icon Will Will To и от 3 9003 9003 9003 9003 9003 9003 9003 9003 9003 9003 9003 9003 9003 9002 9003 9002 9002 9003 9002 9002 9002 9002 9002 9002 9002.. —fa-beat-fade-scale Установить максимальное значение масштабирования значка

Bounce

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

Утилиты Bounce

23.373737373737373737373737373.... Установите сумму переоборудования. fa-bounce-height
Утилита Подробная информация
-FA-BOUNCE-rebound Установил сумму переосмысления ACON, когда приземляется после прыжки
Установите максимальную высоту, на которую будет подпрыгивать значок при отскоке
--fa-bounce-start-scale-x Установите горизонтальное искажение значка («хлюпать») при запуске подпрыгнуть
--fa-bounce-start-scale-y Установить вертикальное искажение («хлюпать») значка при начале отскока
--fa-bounce-jump-scale-x Установить горизонтальное искажение значка («сплющивание») в верхней части прыжка прыжка
--fa-bounce-land-scale-x Установить горизонтальное искажение значка («хлюпать») при приземлении после прыжка
--fa-bounce-land-scale-y прыжок

Flip

Используйте анимацию fa-flip для вращения значка в трехмерном пространстве (открывается в новом окне). По умолчанию флип поворачивает значок вокруг оси Y на 180 градусов. Переворот полезен для переходов, состояний обработки или для использования физических объектов, которые переворачиваются в реальном мире.

Flip Utilities

Utility Details
--fa-flip-x Set x-coordinate of the vector denoting the axis of rotation (between 0 and 1 )
-FA-FLIP-Y Установите Y-координату вектора, обозначающего ось вращения (между 0 и 1 )
70021-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA-FA я Установить z-координату вектора, обозначающего ось вращения (между 0 и 1 ) Положительный угол обозначает вращение по часовой стрелке, отрицательный угол — против часовой стрелки.

Встряхивание

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

Spin

Используйте класс fa-spin , чтобы заставить любой значок вращаться, и используйте fa-spin-pulse , чтобы он вращался с восемью шагами. Это особенно хорошо работает с fa-spinner и всем, что относится к категории значков счетчиков. Если вы хотите, чтобы значок вращался в обратном направлении (например, против часовой стрелки), добавьте дополнительный класс fa-spin-reverse .

Spin Utilities

93333337.Sper 9002.S.7337.S. -reverse
Utility Детали
FA-SPIN Создает Spin 360 ° по часовой стрелке
FA-SPIN-Pulse Сделайте ICON SPIN 360 ° Clock Wish Win 8 xcrement Sept
При использовании в сочетании с fa-spin или fa-spin-pulse заставляет значок вращаться против часовой стрелки.

Мы устарели fa-pulse

9Класс анимации 0021 fa-pulse , который мы использовали в предыдущих версиях Font Awesome, по-прежнему работает в версии 6. Но мы решили переименовать его в fa-spin-pulse . Мы считаем, что это имя более точно соответствует его назначению, и мы перенесем его для использования в будущих версиях.

Специальные возможности

Использование анимации в Интернете наиболее доступным способом требует дополнительного внимания:

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

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

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

Дело Как это влияет на включенные анимации
НЕТ ПРЕДОСТАВЛЕНИЯ Набор предпочтений (по умолчанию) Анимация будет рендеринг, как и ожидалось
Предпочтение для Анимация будет отключена
, когда анимация будет отключена
. установить на уменьшить , это указывает на то, что пользователь предпочитает меньше движения, что может вызвать дискомфорт на странице у людей с вестибулярными нарушениями движения.

Персонализация

Мы добавили настраиваемые свойства CSS (открывается в новом окне), чтобы сделать настройку проще и эффективнее, и вы можете использовать эти настраиваемые свойства во всех наших анимациях. Определите свои собственные значения для следующих свойств, чтобы переопределить и настроить параметры Font Awesome по умолчанию.

7 --fa
Пользовательское свойство CSS Детали Допустимые значения
--fa-animation-delay 0 Установить задержку начальной анимации0040 Любое допустимое значение CSS animation-delay (открывает новое окно)
--fa-animation-direction Установить направление анимации )
--fa-animation-duration Установить продолжительность анимации Любое допустимое значение CSS animation-duration (открывает новое окно)
Установить количество итераций для анимации Любое допустимое значение CSS animation-iteration-count (открывается в новом окне)
--fa-animation-timing Установить, как анимация прогрессирует через 90 кадров4 Любое допустимое значение CSS animation-timing-function (opens new window)

Icon Animation + Wobbles

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *