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

Kostenlose Diagramm-Icons (SVG)

48 kostenlose Diagramm-Icons aus Open-Source-Sets – klicke auf eines, um Größe, Farbe und Strichstärke anzupassen, und kopiere es als SVG, JSX, Data-URI oder CSS.

Aktualisiert am

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

Diagramm-Icons verwenden

Balken-, Linien- und Kreisdiagramm-Icons kennzeichnen Analysen, Berichte und Dashboards.

Alle Icons hier folgen currentColor, übernehmen also die Textfarbe des Elements, in dem sie stehen – ein SVG funktioniert auf hellem und dunklem Hintergrund, in Links und in Buttons. Setze eine explizite width und height (oder definiere die Größe per CSS mit 1em), damit sich das Layout nicht verschiebt, während die Seite lädt.

Barrierefreie Icons

Ist das Icon dekorativ oder steht es neben sichtbarem Text, füge aria-hidden="true" hinzu. Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Diagramm“.

Lizenzen

Diese Diagramm-Icons stammen von Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Material Symbols, Material Design Icons und Carbon – Open-Source-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die persönliche und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche alle 70.000+ Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Diagramm-Icons kostenlos für kommerzielle Nutzung?
Ja. Sie stammen aus Open-Source-Icon-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Icon-Dateien selbst weitergibst.
Wie ändere ich die Farbe eines Diagramm-Icons?
Die SVGs verwenden currentColor, also setzt du die CSS-Farbe des übergeordneten Elements – oder öffnest das Icon im Finder und wählst vor dem Kopieren eine feste Farbe.
Kann ich diese Icons in Webflow oder React verwenden?
Ja. Öffne ein Icon und nutze Copy to Webflow (fügt ein Code Embed ein) oder Copy JSX für eine React-Komponente.