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

Бесплатные иконки чата (SVG)

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

Обновлено

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

Использование иконок чата

Иконки в виде речевых пузырей обозначают комментарии, сообщения, чат поддержки и обратную связь.

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

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

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

Лицензии

Эти иконки чата взяты из наборов Phosphor, Bootstrap Icons, Fluent UI, 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?
Да. Откройте иконку и нажмите Copy to Webflow (вставится Code Embed) или Copy JSX для React-компонента.