devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки графиков (SVG)

48 бесплатных иконок графиков из наборов с открытым исходным кодом — нажмите на любую, чтобы изменить размер, цвет и толщину линии, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

chart-line
Lucidechart-line
Tablerchart-bar
Heroiconschart-line
Phosphorbar-chart
Bootstrap Iconsadd-chart
Material Symbolschart-line
Material Design Iconschart-line
Carbonchart-bar
Lucidechart-bar
Tablerchart-bar-16-solid
Heroiconschart-bar
Phosphorbar-chart-fill
Bootstrap Iconsadd-chart-outline
Material Symbolschart-arc
Material Design Iconschart-3d
Carbonchart-pie
Lucidechart-pie
Tablerchart-bar-20-solid
Heroiconschart-bar-bold
Phosphorbar-chart-line
Bootstrap Iconsadd-chart-outline-rounded
Material Symbolschart-bar
Material Design Iconschart-bar
Carbonchart-area
Lucidechart-pie-filled
Tablerchart-bar-solid
Heroiconschart-bar-duotone
Phosphorpie-chart
Bootstrap Iconsadd-chart-outline-sharp
Material Symbolschart-box
Material Design Iconschart-pie
Carbonfile-chart-line
Lucidechart-ppf
Tablerchart-pie
Heroiconschart-bar-fill
Phosphorpie-chart-fill
Bootstrap Iconsadd-chart-rounded
Material Symbolschart-box-outline
Material Design Iconschart-area
Carbonchart-arcs
Tablerchart-pie-16-solid
Heroiconschart-bar-light
Phosphoradd-chart-sharp
Material Symbolschart-pie
Material Design Iconschart-ring
Carbonchart-area
Tablerchart-pie-20-solid
Heroicons

Использование иконок графиков

Иконки столбчатых, линейных и круговых диаграмм обозначают аналитику, отчёты и дашборды.

Все иконки здесь следуют currentColor, поэтому они берут цвет текста того элемента, в котором находятся: один SVG одинаково хорошо выглядит на светлом и тёмном фоне, в ссылках и кнопках. Задайте явный width и height (или задайте размер в CSS через 1em), чтобы верстка не сдвигалась во время загрузки страницы.

Доступные иконки

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, укажите этому элементу aria-label, например «График».

Лицензии

Эти иконки графиков взяты из Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Material Symbols, Material Design Icons и Carbon — наборов с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужны другие иконки? Ищите среди более чем 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли использовать эти иконки графиков в коммерческих проектах бесплатно?
Да. Они взяты из наборов иконок с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Если вы распространяете сами файлы иконок, сохраняйте уведомление о лицензии.
Как изменить цвет иконки графика?
В SVG используется currentColor, поэтому задайте CSS-свойство color для родительского элемента — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и нажмите «Копировать для Webflow» (вставит Code Embed) или «Копировать JSX» для React-компонента.