circle compose icon
circle-compose-filled from Reicon by REICON · Filled · Messages · MIT Free for personal and commercial use.
- Name
- circle-compose-filled
- Set
- Reicon
- Style
- Filled
- Category
- Messages
- Viewbox
- 24×24
- License
- MIT
1 other variant in Reicon
More messages icons from Reicon
at-signchatchat-checkchat-dotschat-linechat-minuschat-pluschat-roundchat-round-callchat-round-checkchat-round-dotschat-round-likechat-round-linechat-round-moneychat-round-unreadchat-round-videochat-squarechat-square-arrowchat-square-callchat-square-checkchat-square-codechat-square-likechat-unreadchat-x
Use the circle compose icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path fill-rule="evenodd" d="M1.333 12C1.333 6.11 6.11 1.333 12 1.333c.38 0 .749.04 1.043.07a1 1 0 0 1-.194 1.99c-.332-.032-.588-.06-.849-.06A8.667 8.667 0 1 0 20.667 12c0-.261-.028-.517-.06-.85a1 1 0 1 1 1.99-.192c.03.293.07.662.07 1.042c0 5.89-4.776 10.667-10.667 10.667S1.333 17.89 1.333 12" clip-rule="evenodd"/><path d="M21.75 2.25c-.965-.963-2.646-.963-3.61 0l-7.525 7.526c-.861.86-1.17 2.744-1.275 3.788a1.005 1.005 0 0 0 .995 1.1a1 1 0 0 0 .1-.004c1.045-.107 2.927-.412 3.79-1.275l7.526-7.526a2.56 2.56 0 0 0-.002-3.608"/></g></svg>
React
import type { SVGProps } from "react";
export function ReiconCircleComposeFilled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path fillRule="evenodd" d="M1.333 12C1.333 6.11 6.11 1.333 12 1.333c.38 0 .749.04 1.043.07a1 1 0 0 1-.194 1.99c-.332-.032-.588-.06-.849-.06A8.667 8.667 0 1 0 20.667 12c0-.261-.028-.517-.06-.85a1 1 0 1 1 1.99-.192c.03.293.07.662.07 1.042c0 5.89-4.776 10.667-10.667 10.667S1.333 17.89 1.333 12" clipRule="evenodd"/><path d="M21.75 2.25c-.965-.963-2.646-.963-3.61 0l-7.525 7.526c-.861.86-1.17 2.744-1.275 3.788a1.005 1.005 0 0 0 .995 1.1a1 1 0 0 0 .1-.004c1.045-.107 2.927-.412 3.79-1.275l7.526-7.526a2.56 2.56 0 0 0-.002-3.608"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path fill-rule="evenodd" d="M1.333 12C1.333 6.11 6.11 1.333 12 1.333c.38 0 .749.04 1.043.07a1 1 0 0 1-.194 1.99c-.332-.032-.588-.06-.849-.06A8.667 8.667 0 1 0 20.667 12c0-.261-.028-.517-.06-.85a1 1 0 1 1 1.99-.192c.03.293.07.662.07 1.042c0 5.89-4.776 10.667-10.667 10.667S1.333 17.89 1.333 12" clip-rule="evenodd"/><path d="M21.75 2.25c-.965-.963-2.646-.963-3.61 0l-7.525 7.526c-.861.86-1.17 2.744-1.275 3.788a1.005 1.005 0 0 0 .995 1.1a1 1 0 0 0 .1-.004c1.045-.107 2.927-.412 3.79-1.275l7.526-7.526a2.56 2.56 0 0 0-.002-3.608"/></g></svg> </template>
CSS
.icon-circle-compose-filled {
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%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.333%2012C1.333%206.11%206.11%201.333%2012%201.333c.38%200%20.749.04%201.043.07a1%201%200%200%201-.194%201.99c-.332-.032-.588-.06-.849-.06A8.667%208.667%200%201%200%2020.667%2012c0-.261-.028-.517-.06-.85a1%201%200%201%201%201.99-.192c.03.293.07.662.07%201.042c0%205.89-4.776%2010.667-10.667%2010.667S1.333%2017.89%201.333%2012%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M21.75%202.25c-.965-.963-2.646-.963-3.61%200l-7.525%207.526c-.861.86-1.17%202.744-1.275%203.788a1.005%201.005%200%200%200%20.995%201.1a1%201%200%200%200%20.1-.004c1.045-.107%202.927-.412%203.79-1.275l7.526-7.526a2.56%202.56%200%200%200-.002-3.608%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.333%2012C1.333%206.11%206.11%201.333%2012%201.333c.38%200%20.749.04%201.043.07a1%201%200%200%201-.194%201.99c-.332-.032-.588-.06-.849-.06A8.667%208.667%200%201%200%2020.667%2012c0-.261-.028-.517-.06-.85a1%201%200%201%201%201.99-.192c.03.293.07.662.07%201.042c0%205.89-4.776%2010.667-10.667%2010.667S1.333%2017.89%201.333%2012%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M21.75%202.25c-.965-.963-2.646-.963-3.61%200l-7.525%207.526c-.861.86-1.17%202.744-1.275%203.788a1.005%201.005%200%200%200%20.995%201.1a1%201%200%200%200%20.1-.004c1.045-.107%202.927-.412%203.79-1.275l7.526-7.526a2.56%202.56%200%200%200-.002-3.608%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/reicon/circle-compose-filled.svg?color=%231a73e8&size=48
