Для разработчиков выбор формата значков для отображения значков в проектах может оказаться сложной задачей. Мы спрашиваем, использую ли я SVG или есть шрифты-иконки, которые я могу использовать? Что ж, мы знаем нескончаемую битву Icon Fonts и SVG, которая продолжается уже пару лет, и в этой статье мы не собираемся принимать какую-либо сторону.
Мы должны быть свободны принимать наиболее оптимизированные проектные решения на основе любого конкретного проекта как разработчики.
Теперь давайте кратко рассмотрим шрифты веб-иконок, и мы начнем с тех, у которых уже есть поддержка SVG (чтобы быть на хорошей стороне обоих миров), без определенного конкретного порядка.
Совет: с помощью Bit вы можете поделиться любым набором значков как отдельными компонентами, которые можно независимо обнаруживать и использовать с NPM без установки всей библиотеки. Это открытый исходный код, так что вы можете попробовать.
1. Font Awesome
Font Awesome, насчитывающий более 57 000 шрифтов на github, является, пожалуй, наиболее часто используемым и самым популярным шрифтом для иконок. Это также значок, установленный по умолчанию для команды при начальной загрузке. Он также доступен в виде значков SVG среди других форматов. Последняя версия 5.4.1 имеет около 1300+ бесплатных значков, что более чем вдвое больше для профессиональных пользователей. Это полностью открытый исходный код и дружественный к GPL. Лицензия открыта и бесплатна для всего, коммерческого и личного.
2. Значки материалов Google
С более чем 36 000 ⭐️ на github значки материалов - это официальный пакет значков Google, который тщательно разработан в соответствии с Руководством по дизайну материалов, рекомендованным Google для современного дизайна. Для пользователей Angular это действительно удобно с @ angular / material. Эти 900+ значков очень просты в использовании и поддерживают все типы современных экранов, для которых вы можете создать. Он имеет лицензию Apache версии 2.0 и поддерживается всеми современными веб-браузерами. Он также имеет функции самостоятельного хостинга.
3. Иконки с перьями
Feather Icons собрал впечатляющие 14 000+ ⭐️ на github менее чем за 2 года и стал привлекательным местом для многих разработчиков, которым нравится минималистичный дизайн от Коула Бемиса. Эти значки не слишком причудливы, но при этом уделяют внимание деталям. Лицензия MIT и около 250+ иконок с открытым исходным кодом.
4. Иониконы
С более чем 13 000+ ⭐️ на github, Ionicons, созданный командой Ionic, имеют набор иконок, предназначенный для разработки веб-приложений, iOS и Android OS. Его легко настроить с помощью более 700 значков, созданных для ионного фреймворка, и лицензия MIT, поэтому бесплатна. Это к радости нативных разработчиков с любовью от Ionic Framework.
5. Octicons
Несколько месяцев назад команда Github также занялась созданием наборов иконок, чтобы облегчить жизнь разработчикам. Octicons - это 150+ значков github, вы можете видеть эти значки по всему github, также доступны в спрайте SVG, очень легкие, вы можете установить их с помощью npm и лицензией MIT.
6. Типиконы
Мне бы хотелось думать, что Типиконы очень популярны из-за уместности закругленных углов их иконок. С 336 значками в их пакете значков, с поддержкой формата svg даже минимизированным CSS, они бесплатны и с открытым исходным кодом на github. Типиконы имеют хорошую репутацию во многих сообществах разработчиков нативных приложений.
7. Entypo
Entypo - это семейный набор иконок svg, тщательно созданный несколько лет назад Дэниелом Брюсом из Швеции. Он имеет 411 иконок svg, которые бесплатны с лицензией Creative Commons License. Он содержит пару значков, которые вы не увидите во многих других пакетах значков. Его актуальность по прошествии этих лет свидетельствует о сильной приверженности, вложенной в его создание.
8. Зондиконс
С очень красиво иллюстрированными вариантами использования значков на домашней странице Zondicons поставляется с более чем 200+ бесплатными svg-пакетами от Стива Шогера. Основное внимание уделяется упрощенному дизайну, но небольшой недостаток заключается в том, что они не имеют открытого исходного кода, поэтому мы не знаем, как часто они обновляются.
9. Икомун
В Icomoon есть более 5000 иконок и около 490 бесплатных иконок, в ней есть иконки в SVG и множестве других форматов, их можно использовать в качестве шрифтов для иконок и даже в формате PNG. Существует также приложение, которое вы можете использовать для создания собственного набора шрифтов и спрайтов, действительно потрясающе.
10. Линейные значки
В пакете Linearicons более 1000 иконок, в том числе иконки в формате icomoon, готовые иконки в SVG, а также веб-шрифты. В нем 170 бесплатных иконок и премиум-пакет. Бесплатные имеют лицензию Creative Commons и требуют ссылки для коммерческого использования.
11. Девиконы
Иногда нам не нужна чрезмерная нагрузка, связанная с пакетами значков, всего несколько значков социальных сетей, и нас устраивает наша доставка. Если это вы, то Devicons просто создан для вас с упором на технические логотипы и технологические бренды (здесь есть все технические логотипы, которые вам нужны). Это совершенно бесплатно с более чем 100 иконками.
12. Откройте Iconic icons
С почти 3000 иконок на github, Open Iconic Icons, чтобы не быть ошибочно принятым за набор иконок от команды ionic, содержит более 220 иконок в различных форматах, включая SVG. Иконки SVG имеют лицензию MIT.
13. Значки материального дизайна
Не путайте с иконками материалов, созданными командой Google, Иконки дизайна материалов были созданы группой из 19 любителей дизайнерского сообщества по образцу Google Material Design. Это открытый исходный код с более чем 1000 иконок, легко читаемой и бесплатной документацией.
14. Ястребы
Hawcons насчитывает более 500 иконок, а также высококачественные нишевые иконки, сфокусированные на шести основных категориях. К этим категориям относятся документы, спорт, погода, эмодзи, жесты и типы файлов. Лицензия также бесплатна для использования в SVG и других форматах.
15. Значки лаборатории MFG
MFG Labs насчитывает более 100 значков с уникальным дизайном и стандартными форматами веб-шрифтов. Полностью совместим со всеми видами браузеров и совершенно бесплатен.
Заключение
Это всего лишь несколько наборов иконок в постоянно развивающемся пространстве дизайна. Как вы могли заметить, некоторые технологические компании создают или создали свои собственные наборы значков, такие как google, ionic, github, wordpress и многие другие. Который твой любимый? поделитесь в комментариях ниже. Буду рада поболтать! 😃
