900+ бесплатных иконок в стиле Material Design

900+ бесплатных иконок в стиле Material Design

Вы веб-разработчик или веб-дизайнер и хотите идти в ногу со временем? Тогда бесплатные иконки в стиле Material Design — это просто мастхэв!

Что такое Material Design

Material Design — это дизайн софта от Гугла, призванный объединить все его продукты и сервисы под одним универсальным интерфейсом, чтобы пользователям было удобнее.

Ключевая идея Material Design — создать у пользователей интуитивное ощущение работы с реальными физическими объектами.

Иконки в стиле Material Design

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

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

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

Бесплатные иконки Material Design доступны в форматах SVG и PNG, а также в виде шрифта для веб.

Проще всего использовать Material Design иконки именно в виде шрифта, подключаемого с сервера самого Гугла. Сделать это очень просто:

Как подключить иконки Material Design

Добавляем ссылку на сайте в пределах тегов head:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

И в файле CSS добавим соответствующий набор правил для класса .material-icons, с которым и будем использовать иконки:

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

Как использовать иконки Material Design

Использовать иконки очень просто. В нужном месте страницы вставляем такой вот код:

<i class="material-icons">face</i>

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

900+ бесплатных иконок в стиле Material Design

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

<i class="material-icons">&#xE87C;</i>

Стилизация иконок Material Design

Для изменения внешнего вида иконок Material Design вы можете использовать следующие правила CSS:

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Хотя все иконки можно задавать любого размера, все же рекомендуется придерживаться принципов Material Design и использовать заданные размеры 18, 24, 36 or 48px. По-умолчанию иконки выводятся размером в 24px.

900+ бесплатных иконок в стиле Material Design

Как задать собственный цвет иконкам в стиле Material Design

Если следовать руководящим принципам Material Design, то для иконок следует использовать только черный и белый цвет с 54% и 100% непрозрачностью соответственно. Для неактивных иконок — 26% и 30% соответственно.

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

900+ бесплатных иконок в стиле Material Design

Однако ничто не помешает вам применить собственные цвета для иконок:

900+ бесплатных иконок в стиле Material Design

Скачать бесплатные иконки в стиле Material Design

Вы также можете скачать этот набор иконок к себе и использовать его в дизайн-макетах или при создании различных интерфейсов. Скачать бесплатные иконки в стиле Material Design можно здесь (~60MB).

Enjoy!

Похожие записи:

Оставить комментарий: