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

Kostenlose Info-Icons (SVG)

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

Aktualisiert am

info
Lucidefile-info
Tablerinfo
Phosphorinfo
Bootstrap Iconsinfo-circle
Iconoirinfo-12-filled
Fluent UIinfo
Material Symbolscar-info
Material Design Iconsbadge-info
Lucidefile-info-filled
Tablerinfo-bold
Phosphorinfo-lg
Bootstrap Iconsinfo-circle-solid
Iconoirinfo-12-regular
Fluent UIinfo-outline
Material Symbolsinformation
Material Design Iconsinfo-small
Tablerinfo-duotone
Phosphorinfo-circle
Bootstrap Iconsinfo-16-filled
Fluent UIinfo-outline-rounded
Material Symbolsinformation-outline
Material Design Iconsinfo-circle
Tablerinfo-fill
Phosphorinfo-circle-fill
Bootstrap Iconsinfo-16-regular
Fluent UIinfo-rounded
Material Symbolsinfo-circle-filled
Tablerinfo-light
Phosphorinfo-square
Bootstrap Iconsinfo-20-filled
Fluent UIinfo-i
Material Symbolsinfo-square
Tablerinfo-thin
Phosphorinfo-square-fill
Bootstrap Iconsinfo-20-regular
Fluent UIinfo-i-rounded
Material Symbolsinfo-square-filled
Tablerinfo-24-filled
Fluent UIchat-info
Material Symbolsinfo-hexagon
Tablerinfo-24-regular
Fluent UIchat-info-outline
Material Symbolsinfo-hexagon-filled
Tablerinfo-28-filled
Fluent UIchat-info-outline-rounded
Material Symbolsinfo-octagon
Tablerinfo-28-regular
Fluent UI

Info-Icons verwenden

Ein „i“ im Kreis öffnet Hilfe, Tooltips und zusätzliche Informationen.

Alle Icons hier folgen currentColor, übernehmen also die Textfarbe des Elements, in dem sie stehen — ein SVG funktioniert auf hellen und dunklen Hintergründen, in Links und in Buttons. Setze eine explizite width und height (oder definiere die Größe per CSS mit 1em), damit sich das Layout beim Laden der Seite nicht verschiebt.

Barrierefreie Icons

Ist das Icon dekorativ oder steht es neben sichtbarem Text, ergänze aria-hidden="true". Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Info“.

Lizenzen

Diese Info-Icons stammen aus Lucide, Tabler, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons — 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 Info-Icons kostenlos für die 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 Info-Icons?
Die SVGs verwenden currentColor. Setze also die CSS-Farbe des übergeordneten Elements — oder öffne das Icon im Finder und wähle 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.