Нажимайте, сохраняйте, редактируйте и стилизуйте свои иконки
с коллекциями Flaticon
Коллекции полезны для всех, кто хочет содержать свои иконки в порядке, удобно просматривать их и поддерживать единый стиль в своем проекте. Они просты в использовании и могут принести пользу как новичкам, так и профессионалам.
Посмотреть больше
Организовать
Храните нужные вам иконки из разных пакетов в одном месте. Разделяйте свои коллекции по проектам, добавляйте, удаляйте, редактируйте и переименовывайте иконки.
Сохранить
Нажмите на «Резервное копирование иконок» и загрузите копию своей коллекции. Поделитесь ею с коллегами из своей команды или используйте позже сами.
Редактировать
Чтобы раскрасить все однотонные иконки в разные цвета, воспользуйтесь функцией «Коллекция красок» и выберите наиболее подходящий тон.
Эксклюзивные функции
Кроме форматов PNG, SVG, EPS и PSD , вы можете скачать свою коллекцию как иконочный шрифт или “SVG-спрайт” . Эти функции используются веб-дизайнерами и позволяют скачивать файл, содержащий все иконки в виде кода. Это простой способ работы с адаптивным дизайном, которым легко пользоваться с помощью CSS3.
иконочный шрифт
Он поддерживается всеми браузерами, и с ним легко работать: вы можете изменить цвет или добавить тень к форме иконочного шрифта. Однако эта функция работает только с однотонными иконками.
Чтобы использовать цветные иконки на своем веб-сайте, нажмите на SVG-спрайт.
<head>
…
<link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css">
…
</head>
.flaticon-airplane
SVG-спрайт
SVG-спрайт, очень похожий на иконочный шрифт, позволяет загружать шрифт в виде кода и использовать его на вашем веб-сайте. Он также полностью кастомизируется с помощью CSS3, но, в отличие от иконочного шрифта, работает с цветными иконками.
<div hidden>
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg"> <symbol id="blueberries" viewbox="0 0 53.308 53.308">
<title>
blueberries
</title>
<path d="M39.685,2.953c-7.524,0-13.623,6.099-13.623,13.623c0,2.243, 0.552,4.353,1.512,6.219 c1.496-0.565,3.11-0.888,4.804-0.888c5.281,0,9.851,3.011,12.111,7.404c5.15-1.944,8.819-6.905,8.819-12.735 C53.308,9.052,47.208,2.953,39.685,2.953z" style="fill:#003879;">
</path>
…
</svg>
</div>
<svg class="icon">
<use xlink:href="#blueberries"/>
</svg>
#blueberries
Попробовать
Хотите начать новый проект и сразу же использовать коллекции? Посмотрите наше пошаговое руководство
Исследуйте Flaticon