Набор иконок 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, но в случае веб-сайта достаточно указать ссылку где-нибудь в футере, можно на другой странице.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 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
                          В вычислительной технике — это элемент компьютерного символа, соответствующий графеме или графемоподобной единице текста: это может быть буква, число, знак пунктуации или пиктограмма, декоративный символ, графическая метка.
                          что не так?

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