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

Kostenlose Chat-Icons (SVG)

48 kostenlose Chat-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

chat
Phosphorchat
Bootstrap Iconschat-12-filled
Fluent UIchat
Material Symbolschat
Material Design Iconschat
Carbonchat-bold
Phosphorchat-fill
Bootstrap Iconschat-12-regular
Fluent UIchat-outline
Material Symbolschat-outline
Material Design Iconschat-bot
Carbonchat-duotone
Phosphorchat-dots
Bootstrap Iconschat-16-filled
Fluent UIchat-outline-rounded
Material Symbolschat-add
Material Design Iconschat-off
Carbonchat-fill
Phosphorchat-dots-fill
Bootstrap Iconschat-16-regular
Fluent UIchat-outline-sharp
Material Symbolschat-add-outline
Material Design Iconschat-light
Phosphorchat-left
Bootstrap Iconschat-20-filled
Fluent UIchat-rounded
Material Symbolschat-plus
Material Design Iconschat-thin
Phosphorchat-left-fill
Bootstrap Iconschat-20-regular
Fluent UIchat-sharp
Material Symbolschat-plus-outline
Material Design Iconschat-dots
Phosphorchat-text
Bootstrap Iconschat-24-filled
Fluent UIchat-info
Material Symbolschat-dots-bold
Phosphorchat-text-fill
Bootstrap Iconschat-24-regular
Fluent UIchat-info-outline
Material Symbolschat-dots-duotone
Phosphorchat-28-filled
Fluent UIchat-info-outline-rounded
Material Symbolschat-dots-fill
Phosphorchat-28-regular
Fluent UIchat-info-outline-sharp
Material Symbolschat-dots-light
Phosphor

Chat-Icons verwenden

Sprechblasen markieren Kommentare, Nachrichten, Support-Chats und Feedback.

Alle Icons hier folgen currentColor, sie übernehmen also die Textfarbe des Elements, in dem sie stehen — ein SVG funktioniert auf hellen und dunklen Hintergründen, in Links und in Buttons. Lege eine explizite width und height fest (oder bestimme 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, ergänze aria-hidden="true". Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Chat“.

Lizenzen

Diese Chat-Icons stammen aus Phosphor, Bootstrap Icons, Fluent UI, Material Symbols, Material Design Icons, 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 über 70.000 Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Chat-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 Chat-Icons?
Die SVGs verwenden currentColor, also setze die CSS-color 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.