Лучше иконка. Наборы иконок в материальном дизайне
Лучше иконка. Наборы иконок в материальном дизайне
Уверен, что красивый набор иконок пригодится всегда. Значки и иконки, при правильном их использовании, являются очень ценным инструментом для дизайнера. Они притягивают наше внимание или обращают внимание на какую-либо вещь. У многих пользователей сайтов функционал запоминается исключительно визуально т.е. с помощью картинок.
Эта коллекция иконок выпущена в помощь дизайнеру. Коллекция абсолютно бесплатна. Пожалуйста, прочитайте лицензионное соглашение перед использованием значков — лицензия может время от времени меняться. Значки также могут оказаться полезными для корпоративных проектов, блогов, интернет-журналов, дневников, интернет-приложений. Пожалуйста, не стесняйтесь предлагать свои наборы иконок в комментариях к данному посту.
Иконки для web приложений.
Chalkwork HTML является бесплатным набором HTML-тематические иконки. Они прекрасно сочетаются со всей семьей иконок Chalkwork. Эти иконки Вы можете устанавливать абсолютно бесплатно для личных и коммерческих целей. Комплект доступен в 3 размерах и 6 форматов: прозрачный PNG, TIF, GIF, BMP, ICO Windows и Mac ICNS.
Как создать сайт самому?
Иконы рука указатель.
Бесплатные иконы, которые включают 36 рук-указателей, 6 различных типов с 6 цветовыми вариантами. Также имеется исходник.psd формата.
452 иконки свободно доступных для частных и коммерческих целей.
Базовая комплектация.
42 высококачественные иконки в 64 × 64, 32 × 32 × 16 и 16 размеров. Mac OS, Win and .PNG-formats. Mac OS, Win и. PNG-формате.
Эта бесплатный пакет икон предназначен для использования в личных и коммерческих проектов, и должен быть использован без присвоения. Комплект не может быть перераспределен. Комплект включает в себя 26 стильных икон разработанных Midtone Design Studio. Каждая икона является.PNG 48 × 48px. Значки были созданны дизайнером Jonatan Кастро Фернандес.
Комплект Файл статус иконки включает 16 икон, которые могут быть использованы для веб-приложений.
Danish Royalty Free.
Дизайн: Jonas Rask.
Иконы Onebit Set.
80 красивых иконок в резолюции 48 × 48px,. PNG.
Скачать также часть1.
On Stage Icons Set.
Набор содержит 49 свободных векторных иконок, в том числе PSD, которые могут быть полезны для корпоративных и личных проектов. Вы можете использовать набор бесплатно, без каких-либо ограничений. Иконки доступны в формате PNG в резолюции 128 × 128 пикселей. Также включены иконки формата.PSD.
Этот набор содержит 9 браузеров иконок в 64 × 64, 32 и 32 × 16 × 16 пикселей. Включает в себя основные браузеры, как Mozilla Firefox, Internet Explorer, Opera, Google, Chromeи многие другие.
Milky Icons Set.
Набор содержит 131 икону в большинстве своем зеленого цвета, что имеет очень приятный внешний вид для темного фона.
Марк Джеймс (FamFamFam) создал большой набор 1022-гладкую шелковистого цвета 16 × 16 иконы в формате PNG.
В четвертой части «кокеток» добавлено еще 50 икон. Основное назначение этих икон – это добавить любовь и игривость Вашим проектам. Иконки следующих размеров: 16 × 16px, 32 × 32px, 48 × 48px, 64 × 64px и 128 × 128px и 32-битной прозрачности PNG формата файла.
В 5 части «кокетка» содержится 50 высококачественных иконок. Размеры: 16 × 16px, 32 × 32px, 48 × 48px, 64 × 64px и 128 × 128px и 32-битной прозрачности PNG формата файла.
Иконки для e-commerce (электронная коммерция).
Chalkwork платежи доступна в 3 размерах и 6 форматов: прозрачный PNG, TIF, GIF, BMP, ICO Windows и Mac ICNS.
Значки бесплатны для личного использования, а также бесплатны для коммерческого использования, но и дизайнеры требуют ссылок на веб-сайте. The archive contains the icons in all sizes, Windows, Mac and PNG formats. Архив содержит значки всех размеров, Windows, Mac и PNG форматах.
23 значка кредитные карточки бесплатно для свободного скачивания.
Комплект свежих икон.
Этот набор содержит 59 растровых и векторных иконок. В комплект входят иконки в PNG, ICO и ICNS форматов. В EPS векторный файл доступен также.
Полезные наборы иконок.
Набор бесплатных мультимедийных векторных иконок различных цветов и стилей.
Fortune 500 бэджи.
Свыше 200 иконок известных брендов, PSD включены.
Комплект из 50 пассажирских и пешеходных символы, разработанные AIGA теперь доступна в Интернете бесплатно. Есть EPS и GIF формат.
Аудио иконы.
Небольшой набор из 48 × 48px иконы: M-Box, на M-Audio Axiom 25 Midi-клавиатура и монитор TAPCO S5 колонок. Эти иконы являются бесплатными для личного использования. Имеются в.ICNS, .PNG.
Социальные наборы иконок.
Социальные медиа мини упаковка иконок.
Этот набор состоит из 30 (16 × 16) тонко разработанных социальных медиа мини иконок. Они могут свободно использоваться в некоммерческих целях.
Социальные иконки в виде облаков. Формат.PNG.
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
Набор содержит 16 социальных икон (прозрачной) PNG формата.
Эти иконки содержат Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons. Все иконы в четырех размерах: 16 × 16, 32 × 32, 64 и 64 × 12 × 128px. И все они являются свободными.
Каждая иконка в формате. JPG и поставляется в двух размерах: 48 × 48px и 96 × 96px. Каждая иконка темносерая на белом фоне.
В этот набор входят иконки для Blip.fm, Digg, Facebook, Firefox, Flickr, Meneame, Myspace, Technorati, Twitter, Vimeo, WordPress, Youtube, LastFM, RSS, Blogger, GMail, Reddit and StumbleUpon. Иконки доступны в размерах 24 × 24, 32 × 32, 48 и 48 × 64 × 64. Выпущен под лицензией Creative Commons.
Циркуляр социальные иконы.
ZIP-файл включает в себя 3 размера на 17 иконок: 128 × 128px, 64 × 64px и 32 × 32px. There is an icon for the following: Blogger, Delicious, DesignFloat, Digg, Facebook, Flickr, Google, a heart icon that will work for anything (such as bookmark), MySpace, Reddit, an RSS icon, StumbleUpon, Technorati, Twitter, WordPress, Yahoo! Дизайн Eli Burfordиз Австралии.
Красивые наборы иконок.
Стиль почты.
Коллекция иконок мешочков была разработана Paul Kadysz. Она содержит 5 высококачественных иконок. На этот раз у нас есть 3 различных форматах (. ICO,. Icns и. PNG) и 6 размеров! 512px-16px (except .png). 512px-16px (кроме. PNG). Вот как набор выглядит.
350 бесплатных красивых иконок на рабочем столе, также могут быть использованы online. Дизайн мастер David Lanham.
30 бесплатных иконок, которые имеют размер: 256 × 256, 128 × 128, 64 × 64, 48 × 48, 32 × 32, 24 × 24, 16 × 16 пикселей и форматах PNG, ICO и icns.
Проекты иконок для бесплатного скачивания.
Набор содержит 18 красивых значков, связанных с управлением проектами. Набор включает в себя иконы адрес карты, гистограммы, календарь, часы и времени, конференц-устройство, контакты, документы, проекты, поиск, карта сайта и т.д. Абсолютно бесплатно. Использование для любых целей.
Полезный набор векторных икон (256 × 256 пикселей). Он содержит книги, кисти, пастель, клип, цветные карандаши, документ, ластик, блокнот, палитра, ножницы.
Адаптивный дизайн - популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей.
Для адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении.
SVG-графику удобно использовать для иконок, при этом они не будут выглядеть мыльными на устройствах с ретиной и их можно растягивать без потери качества.
Вот, например, один SVG-спрайт в 4-х разных размерах, исходный - 32px:
SVG отлично справляется с этой задачей и хорошо подойдет для использования в адаптивных раскладках.
Иконки для дизайна можно взять из готовых наборов или нарисовать свои.
Наборы готовых иконок
iconmelon.com
Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью use .
icomoon.io
Удобнейший инструмент. Можно не только выбрать и скачать готовые иконки, но также можно загрузить свои и получить их в виде шрифта и/или спрайта. Вместе со спрайтом предлагается загрузить его PNG-версию.
flaticon.com
Большая коллекция, иконки удобно поделены на категории . Выбранные иконки можно скачать в отдельных форматах (шрифт, SVG, PNG) или во всех сразу.
Рисуем сами
Для создания своего набора иконок потребуется векторный редактор:
Adobe Illustrator - по-моему, лучший. 599 руб./месяц в составе подписки на Creative Cloud;
Inkscape - бесплатный и не очень удобный;
Sketch - для Mac OS, $79.99. Имеет некоторые проблемы с векторизацией обводок, но вообще довольно удобный.
Снижение веса
Готовый SVG-файл обычно содержит много лишнего, но при этом хорошо поддается оптимизации. Из кода удаляются ненужные атрибуты, пробелы и переносы, а в числах уменьшается количество знаков после точки. Вес файла уменьшается на 30-50%.
Инструменты для оптимизации:
grunt-svgmin
- задача для Grunt с использованием svgo
. При этом файлы сами будут браться из папки с исходниками, оптимизироваться и складываться в папку с результатами. Очень удобно.
Спрайт или иконочный шрифт?
Шрифт - удобная альтернатива спрайту. Не надо заморачиваться сеткой и расположением иконок, удобно добавлять новые символы, хотя для этого требуются дополнительные инструменты.
С помощью шрифта можно делать не только однотонные иконки, но и разноцветные .
Свой шрифт можно сделать, например, на сайте icomoon.io/app/ . Примерная последовательность действий:
Выберите иконки из набора и/или загрузите свои.
Кликните внизу кнопку Font.
На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.
Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.
Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах.
Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:
также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии , а в некоторых других браузерах вместо иконок может оказаться всё что угодно:
Картинка из статьи Криса Коэра Icon System with SVG Sprites . Я на этом же месте как-то видела иероглифы, но сейчас там SVG, так что скрин сделать не получится.
CSS-tricks , кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.
Несмотря на удобство использования, проблемы поддержки шрифтов в данный момент заставляют сделать выбор в пользу иконок на SVG.
Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.
Как существуют способы вставки SVG на страницу?
Спрайт
.icon {
background-image: url(your.svg);
}
Плюсы:
короткий читабельный код;
картинка кешируется;
Минусы:
запрос к серверу;
в старых Операх фоновый SVG поддерживается странно: могут возникать проблемы при добавлении рамки элементу с SVG-фоном, а в Opera Mini работают только фоны без viewBox;
иконки в спрайте недоступны для стилей страницы;
большие спрайты могут вызывать проблемы с производительностью.