Chat & support

Helping users find the right conversation channel

Communication icons include mail, phone, message, and support-related symbols. These can clarify how a visitor can contact a business, but the icon should accurately match the channel. Do not use a chat bubble for a form that sends an email without explaining that behavior, or imply immediate live assistance when the service is asynchronous.

A contact section should include readable labels and usable destinations. A phone symbol is useful beside a phone number, while a mail symbol can reinforce an email link. Keep the actual contact information as text that can be selected or understood by assistive technology. If a button opens a support form, name that action directly rather than relying on a generic headset icon.

Messaging interfaces need clear distinctions between composing, sending, replying, and attaching files. Select symbols as a coordinated set and review them in the order a user encounters them. A send action should not be visually confused with navigation to another page. Provide confirmation or error feedback when a message is submitted; the state should not depend only on the icon changing color.

For compact headers and floating support controls, test the target area on mobile and ensure that the widget does not cover important content. A decorative badge can improve recognition, but excessive animation can distract from the page. Choose a stroke and size that remain readable on both light and dark surfaces, and use reduced-motion-friendly behavior when adding effects. Preserve clear labels wherever the purpose might otherwise be ambiguous.

Build a contact panel with the actual channels your team monitors. A chat bubble beside Live chat sets a different expectation from a bubble beside Leave a message. Include availability text where it affects the next step. For an unread indicator, try both a single conversation and a list with several unread threads. A small dot can draw attention, while the row label or accessible description explains what the dot means after someone opens the list.

Prepare a useful export

Choose a sample above to open the editor. Review its size, color, and stroke against the background where it will be used. Keep an editable SVG when your destination supports vectors, or export a PNG at an appropriate resolution. Check the result in the real layout and retain applicable source notices with your project.

Explore the icon guides for examples and troubleshooting, or return to all collections to compare related symbols.