Этот полностью бесплатный проект с открытым исходным кодом на GitHub, так что вы можете свободно загружать и использовать его в любом коде.
Эти иконки не имеют CSS-зависимостей и не требуют каких-то специальных функций браузера. На первый взгляд может показаться, что иконки созданы на SVG, но на самом деле это просто div’ы.
С помощью магии CSS вы можете создавать собственные значки для общих элементов интерфейса, таких как гамбургер-меню, значок с тремя точками или значок печати (и многих других).
Вы можете выбирать между тонкими линиями или темными значками. Оба варианта используют схожие свойства CSS и вы даже можете увидеть, какие именно, щелкнув по любому значку в списке. После этого вы увидите боковой слайдер с увеличенным значком вместе с HTML и CSS кодом.
Если вы посмотрите в верхний правый угол полей с кодом, вы увидите маленький значок для копирования. Нажмите его, чтобы автоматически скопировать код в буфер обмена.
Кстати этот значок для копирования также построен с использованием чистого CSS-кода Вентинга.
Чтобы изменить цвет любой иконки, найдите в ее основном классе свойство color. Обновление значения этого свойства также изменит цвет у всех остальных иконок.
Поскольку эти значки довольно простые, они, вероятно, не подойдут для каждого веб-сайта, но это отличная и абсолютно бесплатная альтернатива изображениям или шрифтовым иконкам.
Посетите домашнюю страницу CSS Icon, чтобы увидеть больше примеров и скопировать или отредактировать код источника.
Вы также можете проверить каждый значок отдельно в CodePen, если вы хотите поиграть с кодом источника в вашем браузере.
Оригинал статьи: This Gallery of Pure CSS Icons is What All Frontend Developers Want
Перевод: Земсков Матвей