BITSPARK / Статьи / Дизайн и элементы сайта

Иконки для сайта: где взять, какие лицензии и что проверить

Коротко: иконки для сайта берут из готового набора или заказывают у дизайнера. Условия готового набора записаны в тексте его лицензии: Lucide, Bootstrap Icons и Heroicons требуют сохранить уведомление об авторском праве и текст разрешения, Material Symbols выпущен под Apache License 2.0, Font Awesome Free делит лицензии по формату файла. Статья 1286.1 ГК РФ называет открытую лицензию договором присоединения. Иконке-кнопке без текста нужно имя, которое прочитает программа экранного доступа.

Статья про иконки для сайта: для владельца бизнеса или маркетолога, который заказывает сайт или переделывает существующий и хочет понимать, откуда у подрядчика иконки и какие условия идут вместе с ними. Она разбирает тексты лицензий пяти наборов (Font Awesome Free, Material Symbols, Lucide, Bootstrap Icons, Heroicons), статью 1286.1 ГК РФ и три страницы об иконках без текста: W3C WAI, WCAG 2.2 и MDN. Сведения даны по страницам, открытым 21.10.2026.

Лицензии и страницы W3C и MDN написаны по-английски, поэтому английские цитаты даны с переводом, перевод наш. Длинное тире в цитатах и заголовках заменено дефисом, пропуски в цитатах обозначены знаком (...). Статья не оценивает конкретный набор или конкретную ситуацию и не заменяет юриста. Условия сервисов-каталогов иконок здесь не разбираются: их читают на страницах самих каталогов. Пример вымышленный: мастерская керамики с сайтом example.ru.

Откуда берутся иконки для сайта?

Коротко: иконки берут двумя путями. Первый путь - готовый набор с открытой лицензией, второй - рисунок дизайнера под проект. Для набора условия читают в тексте его лицензии, для рисунка под проект права записывают в договоре с исполнителем. В статье разобраны пять наборов.

Иконка - маленький рисунок на странице: корзина, лупа поиска, телефонная трубка, стрелка. Она стоит на кнопке, в меню или рядом с пунктом списка.

Готовый набор - коллекция иконок, которую выпустил автор или компания. Вместе с набором лежит текст лицензии. В статье разобраны пять наборов: Font Awesome Free, Material Symbols, Lucide, Bootstrap Icons и Heroicons. Рисунок под проект делает дизайнер по вашему заданию. Права на такие иконки записывают в договоре: что ГК РФ говорит об исключительном праве на заказной сайт и что договор может изменить, разбирает статья о договоре на разработку сайта.

Общая часть об авторском праве на изображения, лицензиях Creative Commons и компенсации вынесена в статью об авторском праве на изображение. Здесь разобраны условия конкретных наборов иконок и то, что стоит записать подрядчику.

Есть ли условия у бесплатных наборов иконок?

Коротко: в текстах лицензий всех пяти наборов названы условия. У Lucide, Bootstrap Icons и Heroicons оно звучит как требование оставить уведомление об авторском праве и текст разрешения. У Material Symbols условия распространения изложены в разделе 4 Apache License 2.0. У Font Awesome Free указание авторства требуется всеми тремя лицензиями набора.

Таблица пересказывает тексты лицензий. Перевод наш, точные слова даны в следующих разделах.

НаборЛицензия по текстуЧто сказано об условияхГде сказано
Font Awesome Freeиконки в SVG и JS - CC BY 4.0; иконки в файлах шрифтов - SIL OFL 1.1; остальные файлы - MITуказание авторства требуется лицензиями MIT, SIL OFL и CC BY; скачанные файлы уже содержат комментарии с достаточным указанием авторстваLICENSE.txt, ветка 7.x
Material SymbolsApache License Version 2.0при распространении копий действуют условия из раздела 4: копия лицензии получателям, пометки об изменениях в изменённых файлах, сохранение уведомлений, а при наличии файла NOTICE - читаемая копия уведомлений об авторстве из негоMaterial Symbols guide; LICENSE репозитория google/material-design-icons
LucideISC; часть иконок получена из проекта Feather и идёт под MITиспользовать, копировать, изменять и распространять разрешено при условии, что уведомление об авторском праве и текст разрешения есть во всех копияхLicense - Lucide
Bootstrap IconsMITуведомление об авторском праве и текст разрешения включают во все копии или существенные частиLICENSE репозитория twbs/icons; README
HeroiconsMITто же условие, что у Bootstrap IconsLICENSE репозитория tailwindlabs/heroicons; README

Уведомление об авторском праве - строка «Copyright (c)» с владельцем в начале текста лицензии; у Bootstrap Icons и Lucide в ней стоит и год. У каждого набора она своя: «Copyright (c) 2019-2024 The Bootstrap Authors» у Bootstrap Icons, «Copyright (c) Tailwind Labs, Inc.» у Heroicons, «Copyright (c) 2026 Lucide Icons and Contributors» у Lucide. Текст разрешения - абзац, который в MIT начинается словами «Permission is hereby granted» (перевод наш: настоящим предоставляется разрешение), а в ISC - «Permission to use, copy, modify» (перевод наш: разрешение использовать, копировать, изменять). Он называет, что разрешено, и на каких условиях.

Почему у Font Awesome Free условия зависят от формата файла?

Коротко: LICENSE.txt Font Awesome Free применяет CC BY 4.0 к иконкам в файлах SVG и JS и SIL OFL 1.1 к иконкам в файлах шрифтов. Файл признаёт, что указание авторства требуется всеми тремя лицензиями набора, и сообщает, что скачанные файлы уже содержат комментарии с достаточным указанием авторства.

Файл LICENSE.txt ветки 7.x репозитория FortAwesome/Font-Awesome разделяет иконки по упаковке. Про SVG и JS там сказано:

«The Font Awesome Free download is licensed under a Creative Commons Attribution 4.0 International License and applies to all icons packaged as SVG and JS file types.»

Перевод наш: набор Font Awesome Free лицензирован по международной лицензии Creative Commons «Attribution» 4.0 (CC BY 4.0), и она относится ко всем иконкам, упакованным в файлы типов SVG и JS. О шрифтах:

«In the Font Awesome Free download, the SIL OFL license applies to all icons packaged as web and desktop font files.»

Перевод наш: в наборе Font Awesome Free лицензия SIL OFL относится ко всем иконкам, упакованным в веб-файлы и настольные файлы шрифтов. Что такое SIL Open Font License и какие у неё условия, разобрано в статье о шрифтах для сайта. Что требует CC BY, описано в статье об авторском праве на изображение.

В том же файле есть раздел об указании авторства:

«Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font Awesome Free files already contain embedded comments with sufficient attribution, so you shouldn't need to do anything additional when using these files normally.»

Перевод наш: указание авторства требуется лицензиями MIT, SIL OFL и CC BY. Скачанные файлы Font Awesome Free уже содержат встроенные комментарии с достаточным указанием авторства, поэтому при нормальном использовании этих файлов не должно понадобиться ничего дополнительного. Следом файл просит: «we ask that you do not actively work to remove them from files, especially code» (перевод наш: мы просим не стараться удалять их из файлов, особенно из кода).

Отдельный абзац файла касается значков брендов. Он начинается словами «All brand icons are trademarks of their respective owners» (перевод наш: все значки брендов - товарные знаки их владельцев) и просит использовать логотипы брендов только для обозначения компании, продукта или сервиса, к которым они относятся. Для значков чужих брендов этот абзац стоит прочитать до начала работы.

Какой формат файла выбрать для сайта, SVG или PNG, разобрано в статье о формате изображений для сайта. Для Font Awesome Free выбор формата меняет и лицензию, поэтому формат записывают вместе с названием набора.

Страница Material Symbols guide пишет, что полный набор доступен в Material Symbols Library «in SVG or PNG formats» (перевод наш: в форматах SVG или PNG), и называет одну лицензию на весь набор. Главная страница Bootstrap Icons предлагает «SVGs, SVG sprite, or web fonts» (перевод наш: файлы SVG, SVG-спрайт или веб-шрифты), а в разделе License README репозитория стоит ссылка «MIT» без разделения по форматам.

Что требуют Apache 2.0, MIT и ISC у Material Symbols, Lucide, Bootstrap Icons и Heroicons?

Коротко: во всех четырёх текстах разрешение даётся на условиях. Bootstrap Icons и Heroicons (MIT) и Lucide (ISC) называют условием присутствие уведомления об авторском праве и текста разрешения в копиях. Apache License 2.0 у Material Symbols в разделе 4 перечисляет четыре условия для тех, кто распространяет копии. Тексты не отвечают на вопрос, что считать копией при показе иконки на странице сайта.

Bootstrap Icons и Heroicons (MIT). Тексты MIT в двух наборах совпадают по условию. Первая часть - разрешение:

«Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction (...), subject to the following conditions:»

Перевод наш: настоящим бесплатно предоставляется разрешение любому лицу, получившему копию этого программного обеспечения и сопутствующих файлов документации («ПО»), обращаться с ПО без ограничений (...) при следующих условиях. Условие в тексте одно:

«The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.»

Перевод наш: приведённое выше уведомление об авторском праве и это уведомление о разрешении должны быть включены во все копии или существенные части ПО. Те же слова стоят в LICENSE Heroicons (heroicons/LICENSE at master · tailwindlabs/heroicons · GitHub), с другим владельцем в строке Copyright. README Heroicons пишет: «This library is MIT licensed» (перевод наш: эта библиотека лицензирована по MIT).

Lucide (ISC). Страница License - Lucide приводит лицензию ISC:

«Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.»

Перевод наш: настоящим предоставляется разрешение использовать, копировать, изменять и (или) распространять это ПО для любых целей, за плату или без неё, при условии, что приведённое выше уведомление об авторском праве и это уведомление о разрешении присутствуют во всех копиях. На той же странице есть список иконок Lucide, полученных из проекта Feather («The following Lucide icons are derived from the Feather project», перевод наш: следующие иконки Lucide получены из проекта Feather). Для них приведена лицензия MIT с владельцем «Cole Bemis». Значит, у иконок одного набора могут быть разные тексты лицензий, и подрядчика стоит спросить, какие именно иконки взяты.

Material Symbols (Apache License 2.0). Страница Material Symbols guide сообщает: «Material Symbols are available under the Apache License Version 2.0» (перевод наш: Material Symbols доступны по лицензии Apache License версии 2.0). Текст лицензии лежит в репозитории google/material-design-icons. Раздел 2 даёт право на условиях:

«Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work (...)»

Перевод наш: при условии соблюдения положений этой лицензии каждый участник настоящим предоставляет вам бессрочную, действующую во всём мире, неисключительную, безвозмездную, свободную от роялти, безотзывную авторско-правовую лицензию на воспроизведение, создание производных работ, публичный показ, публичное исполнение, сублицензирование и распространение произведения (...). Условия распространения - в разделе 4:

«You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:»

Перевод наш: вы можете воспроизводить и распространять копии произведения или его производных работ на любом носителе, с изменениями или без них, в исходной или объектной форме, при условии, что вы выполняете следующие условия. Далее идут четыре пункта. Пункт (a): «You must give any other recipients of the Work or Derivative Works a copy of this License» (перевод наш: вы должны дать всем остальным получателям произведения или производных работ копию этой лицензии). Пункт (b): «You must cause any modified files to carry prominent notices stating that You changed the files» (перевод наш: вы должны обеспечить, чтобы изменённые файлы несли заметные пометки о том, что вы их изменили). Пункт (c) говорит о сохранении уведомлений об авторских правах, патентах, товарных знаках и атрибуции в исходной форме производных работ. Пункт (d) говорит о файле NOTICE: если он входит в состав произведения, производные работы должны включать читаемую копию содержащихся в нём уведомлений.

Что тексты не решают. Слов website и web site в приведённых текстах лицензий нет. Считается ли показ иконки на странице копированием или распространением в смысле этих текстов, лицензии не говорят, и статья этого не решает. Где именно должно стоять уведомление при показе иконки на сайте, в приведённых фрагментах не сказано. Подрядчик может назвать, где он размещает уведомление и почему считает это достаточным. Оценку ситуации даёт юрист.

Почему открытая лицензия считается договором по статье 1286.1 ГК РФ?

Коротко: пункт 1 статьи 1286.1 ГК РФ называет открытую лицензию договором присоединения, условия которого должны быть доступны неопределённому кругу лиц до начала использования произведения. Пункт 3 называет её безвозмездной, если ею не предусмотрено иное. Какие наборы иконок подпадают под эту статью, из текста статьи не следует.

Текст статьи открыт на странице «ГК РФ Статья 1286.1. Открытая лицензия на использование произведения науки, литературы или искусства \ КонсультантПлюс». На странице указана редакция от 23.07.2025 (с изменениями, вступившими в силу с 4 января 2026 года); над текстом стоит пометка, что подготовлена редакция с изменениями, не вступившими в силу. Ниже текст в том виде, как он показан на странице 21.10.2026. Пункт 1 определяет открытую лицензию так:

«Лицензионный договор, по которому автором или иным правообладателем (лицензиаром) предоставляется лицензиату простая (неисключительная) лицензия на использование произведения науки, литературы или искусства, может быть заключен в упрощенном порядке (открытая лицензия).»

Дальше в том же пункте:

«Открытая лицензия является договором присоединения. Все ее условия должны быть доступны неопределенному кругу лиц и размещены таким образом, чтобы лицензиат ознакомился с ними перед началом использования соответствующего произведения. В открытой лицензии может содержаться указание на действия, совершение которых будет считаться акцептом ее условий (статья 438). В этом случае письменная форма договора считается соблюденной.»

Что такое договор присоединения, статья 1286.1 не объясняет: это определяет другая статья ГК РФ, которая здесь не разбирается. Статья допускает, что в лицензии назовут действия, совершение которых считается принятием её условий (акцептом). Есть ли такое указание у конкретного набора, видно по тексту его лицензии. Пункт 3 говорит об оплате:

«Открытая лицензия является безвозмездной, если ею не предусмотрено иное.»

Статья не называет ни один набор иконок. Подпадает ли текст лицензии Font Awesome, Lucide, Bootstrap Icons, Heroicons или Material Symbols под открытую лицензию по статье 1286.1 и что из этого следует для вашего сайта, статья не определяет. Это вопрос к юристу. Пункт 1 требует, чтобы условия были доступны до начала использования, поэтому ссылку на текст лицензии набора можно попросить у подрядчика до начала работы. Как та же статья применяется к шрифтам, разобрано в статье о шрифтах для сайта.

Нужно ли иконке-кнопке без текста доступное имя?

Коротко: W3C WAI пишет, что текстовая альтернатива изображения в кнопке или ссылке должна называть действие. MDN называет кнопку с SVG-иконкой без текста примером элемента без доступного имени, для которого подходит атрибут aria-label. Критерий WCAG 2.2 1.1.1 требует у элемента управления имя, описывающее его назначение. Слова иконка в критерии нет, пример иконки берут из WAI и MDN.

Доступное имя - название элемента, которое получает программа экранного доступа (screen reader), озвучивающая содержимое страницы.

Страница Functional Images | Web Accessibility Initiative (WAI) | W3C называет изображения, которые запускают действия, функциональными. Про их текстовую альтернативу она пишет:

«The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.»

Перевод наш: текстовая альтернатива изображения должна передавать действие, которое будет запущено (назначение изображения), а не описание изображения. Для иконки принтера W3C приводит альтернативу “print this page” (перевод наш: напечатать эту страницу), для иконки лупы на кнопке поиска - “search” (поиск). Описания “(image of a) printer” (изображение принтера) и “magnifying lens” (увеличительное стекло) в абзаце названы примерами описания изображения. Что бывает без альтернативы, страница тоже говорит:

«Missing or empty alt values create significant problems for screen reader users because functional images are essential to the functionality of the content.»

Перевод наш: отсутствующие или пустые значения alt создают серьёзные проблемы для пользователей программ экранного доступа, потому что функциональные изображения необходимы для работы содержимого. Пример 4 страницы W3C - «Stand-alone icon image that has a function» (перевод наш: самостоятельная иконка, у которой есть функция). Иконка принтера в ссылке получает альтернативу “Print this page”.

Изображение рядом с текстом ссылки работает иначе. В примере 2 логотип стоит внутри ссылки с текстом «W3C Home», и ему задано пустое значение alt: страница объясняет, что изображение не добавляет другой функции или информации, и пустое значение убирает повтор. В примере 3 значок рядом с текстом ссылки сообщает, что ссылка откроется в новом окне, и получает альтернативу “new window” (перевод наш: новое окно).

Для кнопки с SVG-иконкой MDN даёт такой пример на странице ARIA: aria-label attribute - ARIA | MDN (страница изменена 19 сентября 2025 года):

«A common example of such an element is a button containing an SVG icon without any text.»

Перевод наш: распространённый пример такого элемента - кнопка, содержащая SVG-иконку без какого-либо текста. Предыдущее предложение страницы описывает такие элементы: доступного имени у них нет или оно неточно, а видимого содержимого, которое придало бы смысл, нет. Код из примера MDN:

<button aria-label="Close">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="black" />
  </svg>
</button>

Здесь имя кнопки - «Close» (перевод наш: закрыть) - задано атрибутом aria-label у самой кнопки. MDN поясняет, что без текста атрибут aria-label нужен, чтобы пользователь программы экранного доступа понял функцию кнопки. Для случая, когда рядом есть видимая подпись, страница советует: «It is strongly recommended to prioritize the use of aria-labelledby over aria-label if a visible label exists for the element to reference» (перевод наш: настоятельно рекомендуется отдавать приоритет aria-labelledby перед aria-label, если существует видимая подпись, на которую элемент может сослаться). Ещё одно замечание MDN: «consider making important information visible for all users» (перевод наш: подумайте о том, чтобы сделать важную информацию видимой для всех пользователей), потому что содержимое aria-label не показывается вне вспомогательных технологий.

Страница Understanding Success Criterion 1.1.1: Non-text Content | WAI | W3C (дата на странице: обновлено 6 сентября 2026 года) формулирует критерий WCAG 2.2 для нетекстового содержимого. Для элементов управления там сказано:

«If non-text content is a control or accepts user input, then it has a name that describes its purpose.»

Перевод наш: если нетекстовое содержимое - элемент управления или принимает ввод пользователя, у него есть имя, описывающее его назначение. Иконку как пример критерию не приписывают. Для чисто декоративного содержимого критерий пишет, что оно реализовано так, чтобы вспомогательные технологии могли его игнорировать.

WCAG - рекомендации W3C. Обязательны ли они для вашего сайта, в статье не обсуждается. Какие российские акты говорят о доступности официальных сайтов, разобрано в статье о версии сайта для слабовидящих. В примере MDN имя иконки задано атрибутом у самой кнопки на той же странице, без отдельной версии сайта.

Что записать в задание и спросить у подрядчика?

Коротко: в задание записывают название набора иконок, ссылку на текст его лицензии, формат файлов, требование лицензии об указании авторства и место, где оно будет, а для рисунков под проект - автора и переход прав. Для иконок-кнопок без текста записывают имя каждой кнопки. Каждый вопрос в таблице привязан к странице, где об этом сказано.

Работа над сайтом проходит по шагам. На главной bitspark.ru шаги «Дизайн» и «Разработка» описаны так: «Дизайн» - «Формируем характер проекта: типографику, композицию, движение и систему интерфейса.»; «Разработка» - «Верстаем, программируем и подключаем сервисы. Технологии выбираем под задачу.» Вопросы об иконках фиксируют в задании и договоре.

Вопрос подрядчикуОпора
Из какого набора взята каждая иконка и какой это набор: Font Awesome Free, Material Symbols, Lucide, Bootstrap Icons, Heroicons или другой?У каждого набора свой текст лицензии (таблица выше); у Lucide часть иконок идёт из Feather под MIT
Где лежит текст лицензии набора и есть ли ссылка на него?п.1 ст.1286.1 ГК РФ: условия открытой лицензии должны быть доступны до начала использования
Что требует текст лицензии (уведомление об авторском праве, указание авторства, условия раздела 4 Apache) и где это будет: в файлах, в коде или на странице сайта?тексты лицензий (разделы выше); Font Awesome: скачанные файлы содержат комментарии, которые файл просит не стараться удалять
В каком виде переданы иконки: файлы SVG, PNG или шрифт?Font Awesome Free: SVG и JS идут под CC BY 4.0, файлы шрифтов под SIL OFL 1.1
Есть ли среди иконок значки чужих брендов и на каких условиях они использованы?Font Awesome Free LICENSE.txt, абзац о значках брендов
Кто нарисовал иконки под проект и кому переходят права? Где это записано в договоре?статья о договоре на разработку сайта: состав передаваемых прав смотрят по договору
Как названа каждая кнопка-иконка без текста и где это имя задано?W3C WAI Functional Images; MDN aria-label; WCAG 2.2, критерий 1.1.1
Какие иконки рядом с текстом только украшают и как они оформлены для программ экранного доступа?W3C WAI Functional Images, примеры 2 и 3; WCAG 2.2, критерий 1.1.1

Пример записи для сайта example.ru, мастерской керамики:

Сайт: example.ru, мастерская керамики
Иконки корзины, поиска и телефона: набор ______, версия ______
Лицензия набора: ______; ссылка на текст: ______
Что требует лицензия: ______; где это будет: ______
Формат файлов: ______
Иконки, нарисованные под проект: автор ______; кому переходят права ______; пункт договора ______
Кнопки-иконки без текста: имя каждой кнопки ______

Заполненный список прикладывают к заданию или к договору. Общее правило о том, что стоит в техническом задании на сайт, разобрано в статье о техническом задании.

Что проверить при приёмке иконок?

Коротко: при приёмке сверяют иконки с записью в задании: набор, лицензия, место уведомления и имена иконок-кнопок. Правила приёмки работы и последствия приёмки без проверки разобраны в статье о договоре на разработку сайта. Пять шагов ниже идут в том порядке, в каком их удобно выполнять.

  1. Откройте список иконок из задания и попросите подрядчика показать, из каких наборов они взяты. Название набора и версия должны совпасть с записью.
  2. Попросите ссылку на текст лицензии каждого набора и сохраните её рядом с актом приёмки. По п.1 ст.1286.1 ГК РФ условия открытой лицензии должны быть доступны до начала использования.
  3. Попросите показать, где выполнено условие лицензии: уведомление об авторском праве, указание авторства или файл NOTICE. Для Font Awesome Free файл LICENSE.txt просит не стараться удалять встроенные комментарии с указанием авторства.
  4. Для каждой иконки-кнопки без текста попросите показать её имя. По примеру MDN имя задано атрибутом aria-label у самой кнопки. Для иконок рядом с текстом попросите объяснить, какие из них только украшают.
  5. Откройте сайт на телефоне и нажмите на иконки-кнопки. Что web.dev пишет об областях касания, разобрано в статье о юзабилити сайта.

Как принять сайт и что происходит при приёмке без проверки, описано в статье о договоре на разработку сайта.

Источники

Даты: все страницы открыты 21.10.2026. Заголовки взяты из тега title страниц; длинное тире в заголовках заменено дефисом. Тексты лицензий открыты в виде файлов LICENSE.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Дизайн и элементы сайта» →