Набор контурных иконок на разные темы

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

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

Иконочный шрифт

Первая коллекция состоит из 730+ контурных иконок, которая включает в себе формат SVG, PNG и шрифтовой вариант.

line icon

Скачать

Чтобы использовать иконки как шрифт нужно из архива достать папку fonts и загрузить ее на свой сервер (для WordPress в свою тему оформления). Затем подключить шрифт через файл стилей CSS, таким образом:

@font-face {
  font-family: "linea-weather-10";
  src:url("fonts/linea-weather-10.eot");
  src:url("fonts/linea-weather-10.eot?#iefix") format("embedded-opentype"),
    url("fonts/linea-weather-10.woff") format("woff"),
    url("fonts/linea-weather-10.ttf") format("truetype"),
    url("fonts/linea-weather-10.svg#linea-weather-10") format("svg");
  font-weight: normal;
  font-style: normal;
}

Дальше просто прописываете через псевдоэлемент :before или :after в свойстве contetnсимвол иконки. И не забываем указывать семейство шрифта, выглядит это вот так:

.icon1:before{
        font-family: "linea-weather-10";
        content: "";
        color:red;
        font-size:32px;
        padding-right:10px;
}

Линейные иконки в формате PSD, AI

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

psd icon

Скачать

линейные иконки

Скачать

Экспериментальные иконки (18+)

Последняя коллекция иконок из 45 штук носит характер грубости и оттенка жестокости, но все же может кому-то пригодится.

гиф превью

контур иконки

Скачать

Оставить ответ

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