Fluent Icons

Chat Multiple Heart icon

Used in community scenarios to set a ton for positive conversations. The Chat Multiple Heart icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 5 sizes from 16 to 32 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_chat_multiple_heart_24_regular.svg

Chat Multiple Heart icon in React

npm install @fluentui/react-icons

import { ChatMultipleHeart24Regular } from "@fluentui/react-icons";

export function Example() {
  return <ChatMultipleHeart24Regular aria-label="Chat Multiple Heart" />;
}

Chat Multiple Heart icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/chat_multiple_heart_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/chat_multiple_heart_24_regular.svg" width="24" height="24" alt="Chat Multiple Heart">

Chat Multiple Heart icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.ChatMultipleHeart())" />

Chat Multiple Heart icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.chat_multiple_heart_24_regular)

Chat Multiple Heart icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF7CF;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF7CF;" FontSize="24" />

Chat Multiple Heart icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_chat_multiple_heart_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f7cf";
  font-size: 24px;
}

Chat Multiple Heart icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_chat_multiple_heart_24_regular" />

// Kotlin
R.drawable.ic_fluent_chat_multiple_heart_24_regular

Chat Multiple Heart icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .chatMultipleHeart24Regular)

Chat Multiple Heart icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Chat Multiple Heart icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS. 

npm install @fluentui/react-icons

import { ChatMultipleHeart24Regular, ChatMultipleHeart24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChatMultipleHeart24Regular aria-label="Chat Multiple Heart" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chat_multiple_heart_24_regular.svg" width="24" height="24" alt="Chat Multiple Heart">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent: 

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.3412 8.3412C7.1326 7.5498 8.41849 7.55366 9.21333 8.3485L9.49671 8.63188L9.77626 8.35179C10.5691 7.55898 11.8556 7.56284 12.6518 8.3591C13.4468 9.15408 13.4493 10.4364 12.6597 11.2303L9.73275 14.1556C9.6107 14.2777 9.41283 14.2777 9.29079 14.1556L6.3485 11.2133C5.55366 10.4185 5.5498 9.1326 6.3412 8.3412ZM2.06158 10.5C2.06158 6.35786 5.41944 3 9.56158 3C13.7037 3 17.0616 6.35786 17.0616 10.5C17.0616 14.6421 13.7037 18 9.56158 18C8.46241 18 7.41678 17.7631 6.47447 17.337C5.44699 17.5819 4.29396 17.8587 3.54374 18.039C2.6294 18.2588 1.80697 17.428 2.03999 16.5147C2.22638 15.7842 2.5102 14.6714 2.76423 13.6734C2.31325 12.7088 2.06158 11.6329 2.06158 10.5ZM9.56158 4.5C6.24787 4.5 3.56158 7.18629 3.56158 10.5C3.56158 11.4914 3.80145 12.4246 4.22568 13.2468L4.35619 13.4998L4.28601 13.7757C4.05784 14.6724 3.79467 15.7047 3.59592 16.4838C4.39489 16.2919 5.46095 16.0363 6.38368 15.8167L6.6482 15.7537L6.89161 15.8749C7.69487 16.2748 8.60084 16.5 9.56158 16.5C12.8753 16.5 15.5616 13.8137 15.5616 10.5C15.5616 7.18629 12.8753 4.5 9.56158 4.5ZM9.46191 18.9995C10.8001 20.241 12.5922 21.0001 14.5616 21.0001C15.6611 21.0001 16.707 20.763 17.6495 20.3367C18.6933 20.581 19.8358 20.8248 20.563 20.9768C21.4554 21.1633 22.2348 20.3623 22.0304 19.4773C21.8679 18.774 21.6117 17.6821 21.3586 16.6741C21.8098 15.7094 22.0616 14.6332 22.0616 13.5001C22.0616 10.2171 19.9523 7.42684 17.015 6.41052C17.3653 7.04756 17.6363 7.73435 17.8146 8.45761C19.4676 9.52617 20.5616 11.3853 20.5616 13.5001C20.5616 14.4915 20.3217 15.4247 19.8975 16.2469L19.767 16.4999L19.8372 16.7757C20.065 17.6711 20.3037 18.6757 20.4787 19.4262C19.7046 19.2625 18.6611 19.0361 17.7395 18.8167L17.475 18.7537L17.2316 18.8749C16.4283 19.2748 15.5223 19.5001 14.5616 19.5001C13.5021 19.5001 12.5067 19.2254 11.6427 18.7434C10.9768 18.911 10.2796 19.0001 9.56163 19.0001C9.52835 19.0001 9.49511 18.9999 9.46191 18.9995Z" fill="currentColor"/></svg>

Details

NameChat Multiple Heart
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px
Regular (outlined) fileic_fluent_chat_multiple_heart_24_regular.svg
Filled fileic_fluent_chat_multiple_heart_24_filled.svg
React (Regular)ChatMultipleHeart16Regular, ChatMultipleHeart20Regular, ChatMultipleHeart24Regular, ChatMultipleHeart28Regular, ChatMultipleHeart32Regular
React (Filled)ChatMultipleHeart16Filled, ChatMultipleHeart20Filled, ChatMultipleHeart24Filled, ChatMultipleHeart28Filled, ChatMultipleHeart32Filled
LicenseMIT (© Microsoft Corporation)

Keywords

chat

Related icons

Chat MultipleChat Multiple CheckmarkChat Multiple MinusChat Multiple PersonComment MultipleComment Multiple CheckmarkComment Multiple LinkComment Multiple MentionChat CursorGame ChatHeart Circle HintPerson Heart