Пользователь
30,2
рейтинг
21 октября 2014 в 16:56

Разработка → Набор иконок Material Design от Google



В списке самых популярных репозиториев Github за неделю на первое место вышел набор иконок Material Design, разработанный в компании Google.

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

Иконки призваны стать стандартными для приложений, выполненных в унифицированном стиле «материального» дизайна, который Google представила в версии Android 5.0 (см. спецификации Material Design). В то же время, они одинаково хорошо подходят и для Android-приложений, и для iOS, и для веб-приложений.

В репозиторий входят SVG-версии всех иконок на 24 и 48 px, SVG и CSS спрайты, версии PNG для веба (1x, 2x) и iOS (1x, 2x, 3x), а также версии в высоком разрешении (PNG). Есть онлайн-превью.

Выложен zip-архив с последней версией.

Устройства




Общие изображения




Набор опубликован под лицензией CC-BY-SA 4.0 (копилефт). Есть требование Attribution, но в случае веб-сайта достаточно указать ссылку где-нибудь в футере, можно на другой странице.
Анатолий Ализар @alizar
карма
749,5
рейтинг 30,2
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (16)

  • +2
    Как из этого сделать шрифт, кто знает?
    • +3
      Используйте icomoon.io/app
      Только серые глифы станут черными — шрифты поддерживают только 1 цвет (без альфа-канала).
    • +2
      Сегодня наткнулся на тему для bootstrap, которая использует Мaterial Design, там есть и вебфонт — github.com/FezVrasta/bootstrap-material-design
      • 0
        Отлично, спасибо.
      • 0
        Сейчас играюсь с этой темой — пока не сильно кроссбраузерно (для IE нужно не new CustomEvent, а document.createEvent()), ну и так по мелочи.
        К тому же в демке более актуальная версия, чем в репозитории. В итоге для своего less проекта скинул _variables.less, а остальное буду обновлять по мере выхода обновлений.
        Но шрифт утянул именно оттуда
  • +1
    Интересно, если эти иконки выполнены в стиле материального дизайна, то что именно в них соответствует данному стилю? Ведь сам Гугл характеризует три аспекта материального дизайна:
    1. Реализм в освещении. Добавление легкого объема и теней позволяет сделать элементы интерфейсов более понятными, а аффордансы — более очевидными.
    2. Фокус на типографике, иконографике и интернациональности.
    3. Единые стандарты анимации для всех приложений и устройств.
    С иконками связан только второй и то частично.
    Кто-то может объяснить почему эти иконки именно в стиле материального дизайна? Кроме того что они вышли в составе Lollipop?
    • +4
      Во-первых, непонятно, почему связан только частично. Слово аспект говорит само за себя и подразумевает, что каждый из аспектов — о разных вещах. Ну да, иконки не относятся к анимациям — и?..
      Во-вторых, в официальном введении в Material Design я не увиден деления именно на три указанных пункта. Там слева можно увидеть расклад новой концепции по полочкам, где в разделе Style есть пункт Icons — там описаны все аспекты иконок.
  • 0
    А есть какие-то cdn сервисы бесплатных иконок? (этих в частности)
    • +3
      www.flaticon.com/ Огромная база бесплатных иконок. Большинство доступны в вариантах PNG, PSD, SVG, EPS, Base64, есть плагин для Photoshop/Illustrator, чтобы быстро их искать и добавлять в дизайн.
    • +4
      Пользуюсь ими. Перед скачиванием читайте тип лицензии.
  • –13
    Font Awesome по-ходу соснёт
  • –1
    Хм, а вот тут (http://thenounproject.com/), конечно не бесплатно, но явно больше иконок в очень похожем стиле
    • 0
      Гм… а что именно вам не понравилось, минусаторы? То что по ссылке — не произведение корпорации добра?
  • 0
    Что-то как-то не очень выходит с ассоциацией названия иконки и ее значением. К примеру, reorder иконка — это скорее стопка листочков или фанеры, чем упорядочивание… Вообще тенденция как-то смешать привычные ассоциации и в итоге вообще ничего не будет понятно в этих ваших интерфейсах с плоскими иконками… Нет души в них, к тому же…
  • 0
    Набор содержит аж 750 (!) глифов

    Всё же «глиф» это не то, что вы думаете.
    • +2
      В вычислительной технике — это элемент компьютерного символа, соответствующий графеме или графемоподобной единице текста: это может быть буква, число, знак пунктуации или пиктограмма, декоративный символ, графическая метка.
      что не так?

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