comment icon

comment from Font Awesome 6 Solid by Dave Gandy · Regular · Chat · CC-BY-4.0 Attribution required.

Name
comment
Set
Font Awesome 6 Solid
Style
Regular
Category
Chat
Viewbox
512×512
License
CC BY 4.0

The same icon in other sets

commentAkar Iconscomment-outlinedAnt Design IconscommentBoxIcons v2commentBoxIcons v2 SolidcommentCodiconscommentElement PluscommentFont Awesome 6 RegularcommentFont Awesome RegularcommentFont Awesome Solidcomment-12-filledFluent UI System Iconscomment-16Fluent UI System Color Iconscommentcss.ggcommentIconParkcommentIconPark OutlinecommentIconPark SolidcommentIconPark TwoTonecommentLine AwesomecommentMajesticonscommentMaterial SymbolscommentMaterial Symbols LightcommentMaterial Design Iconscomment-fillMingCute IconcommentOcticonscommentOpenMoji

More chat icons from Font Awesome 6 Solid

comment-dotscomment-medicalcomment-slashcommentsiconspooquote-leftquote-rightvideo-slashcomment-dollarcomment-nodescomment-sms

Use the comment icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.8 3.4-17.4l.3-.3c.3-.3.7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidComment(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.8 3.4-17.4l.3-.3c.3-.3.7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.8 3.4-17.4l.3-.3c.3-.3.7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208"/></svg>
</template>

CSS

.icon-comment {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%20240c0%20114.9-114.6%20208-256%20208c-37.1%200-72.3-6.4-104.1-17.9c-11.9%208.7-31.3%2020.6-54.3%2030.6C73.6%20471.1%2044.7%20480%2016%20480c-6.5%200-12.3-3.9-14.8-9.9s-1.1-12.8%203.4-17.4l.3-.3c.3-.3.7-.7%201.3-1.4c1.1-1.2%202.8-3.1%204.9-5.7c4.1-5%209.6-12.4%2015.2-21.6c10-16.6%2019.5-38.4%2021.4-62.9C17.7%20326.8%200%20285.1%200%20240C0%20125.1%20114.6%2032%20256%2032s256%2093.1%20256%20208%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%20240c0%20114.9-114.6%20208-256%20208c-37.1%200-72.3-6.4-104.1-17.9c-11.9%208.7-31.3%2020.6-54.3%2030.6C73.6%20471.1%2044.7%20480%2016%20480c-6.5%200-12.3-3.9-14.8-9.9s-1.1-12.8%203.4-17.4l.3-.3c.3-.3.7-.7%201.3-1.4c1.1-1.2%202.8-3.1%204.9-5.7c4.1-5%209.6-12.4%2015.2-21.6c10-16.6%2019.5-38.4%2021.4-62.9C17.7%20326.8%200%20285.1%200%20240C0%20125.1%20114.6%2032%20256%2032s256%2093.1%20256%20208%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/comment.svg?color=%231a73e8&size=48