purple circle emoji
purple-circle from Fluent Emoji High Contrast by Microsoft Corporation · Default · Symbols · MIT Free for personal and commercial use.
- Name
- purple-circle
- Set
- Fluent Emoji High Contrast
- Style
- Default
- Category
- Symbols
- Viewbox
- 32×32
- License
- MIT
The same emoji in other sets
More symbols icons from Fluent Emoji High Contrast
a-button-blood-typeab-button-blood-typeantenna-barsaquariusariesatm-signatom-symbolb-button-blood-typebaby-symbolback-arrowbaggage-claimbiohazardblack-circleblack-large-squareblack-medium-small-squareblack-medium-squareblack-small-squareblack-square-buttonblue-circleblue-squarebright-buttonbrown-circlebrown-squarecancer
Use the purple circle emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 1C7.716 1 1 7.716 1 16s6.716 15 15 15s15-6.716 15-15S24.284 1 16 1m1.5 2.086L3.086 17.5a13 13 0 0 1-.072-2.1L15.4 3.015a13 13 0 0 1 2.1.072m2.338.49q.81.25 1.572.6L4.176 21.41a13 13 0 0 1-.6-1.572zM5.19 23.224L23.224 5.19q.645.433 1.234.938l-18.33 18.33q-.505-.588-.938-1.234m2.352 2.648l18.33-18.33q.506.588.938 1.234L8.776 26.81q-.646-.432-1.234-.938m3.048 1.952L27.824 10.59q.35.761.6 1.572L12.162 28.424a13 13 0 0 1-1.572-.6m3.91 1.09L28.914 14.5a13 13 0 0 1 .072 2.1L16.6 28.985a13 13 0 0 1-2.1-.072m5.561-.56l8.292-8.293a13.03 13.03 0 0 1-8.292 8.292M3.647 11.938a13.03 13.03 0 0 1 8.292-8.292z"/></svg>
React
import type { SVGProps } from "react";
export function FluentEmojiHighContrastPurpleCircle(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 1C7.716 1 1 7.716 1 16s6.716 15 15 15s15-6.716 15-15S24.284 1 16 1m1.5 2.086L3.086 17.5a13 13 0 0 1-.072-2.1L15.4 3.015a13 13 0 0 1 2.1.072m2.338.49q.81.25 1.572.6L4.176 21.41a13 13 0 0 1-.6-1.572zM5.19 23.224L23.224 5.19q.645.433 1.234.938l-18.33 18.33q-.505-.588-.938-1.234m2.352 2.648l18.33-18.33q.506.588.938 1.234L8.776 26.81q-.646-.432-1.234-.938m3.048 1.952L27.824 10.59q.35.761.6 1.572L12.162 28.424a13 13 0 0 1-1.572-.6m3.91 1.09L28.914 14.5a13 13 0 0 1 .072 2.1L16.6 28.985a13 13 0 0 1-2.1-.072m5.561-.56l8.292-8.293a13.03 13.03 0 0 1-8.292 8.292M3.647 11.938a13.03 13.03 0 0 1 8.292-8.292z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 1C7.716 1 1 7.716 1 16s6.716 15 15 15s15-6.716 15-15S24.284 1 16 1m1.5 2.086L3.086 17.5a13 13 0 0 1-.072-2.1L15.4 3.015a13 13 0 0 1 2.1.072m2.338.49q.81.25 1.572.6L4.176 21.41a13 13 0 0 1-.6-1.572zM5.19 23.224L23.224 5.19q.645.433 1.234.938l-18.33 18.33q-.505-.588-.938-1.234m2.352 2.648l18.33-18.33q.506.588.938 1.234L8.776 26.81q-.646-.432-1.234-.938m3.048 1.952L27.824 10.59q.35.761.6 1.572L12.162 28.424a13 13 0 0 1-1.572-.6m3.91 1.09L28.914 14.5a13 13 0 0 1 .072 2.1L16.6 28.985a13 13 0 0 1-2.1-.072m5.561-.56l8.292-8.293a13.03 13.03 0 0 1-8.292 8.292M3.647 11.938a13.03 13.03 0 0 1 8.292-8.292z"/></svg> </template>
CSS
.icon-purple-circle {
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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%201C7.716%201%201%207.716%201%2016s6.716%2015%2015%2015s15-6.716%2015-15S24.284%201%2016%201m1.5%202.086L3.086%2017.5a13%2013%200%200%201-.072-2.1L15.4%203.015a13%2013%200%200%201%202.1.072m2.338.49q.81.25%201.572.6L4.176%2021.41a13%2013%200%200%201-.6-1.572zM5.19%2023.224L23.224%205.19q.645.433%201.234.938l-18.33%2018.33q-.505-.588-.938-1.234m2.352%202.648l18.33-18.33q.506.588.938%201.234L8.776%2026.81q-.646-.432-1.234-.938m3.048%201.952L27.824%2010.59q.35.761.6%201.572L12.162%2028.424a13%2013%200%200%201-1.572-.6m3.91%201.09L28.914%2014.5a13%2013%200%200%201%20.072%202.1L16.6%2028.985a13%2013%200%200%201-2.1-.072m5.561-.56l8.292-8.293a13.03%2013.03%200%200%201-8.292%208.292M3.647%2011.938a13.03%2013.03%200%200%201%208.292-8.292z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%201C7.716%201%201%207.716%201%2016s6.716%2015%2015%2015s15-6.716%2015-15S24.284%201%2016%201m1.5%202.086L3.086%2017.5a13%2013%200%200%201-.072-2.1L15.4%203.015a13%2013%200%200%201%202.1.072m2.338.49q.81.25%201.572.6L4.176%2021.41a13%2013%200%200%201-.6-1.572zM5.19%2023.224L23.224%205.19q.645.433%201.234.938l-18.33%2018.33q-.505-.588-.938-1.234m2.352%202.648l18.33-18.33q.506.588.938%201.234L8.776%2026.81q-.646-.432-1.234-.938m3.048%201.952L27.824%2010.59q.35.761.6%201.572L12.162%2028.424a13%2013%200%200%201-1.572-.6m3.91%201.09L28.914%2014.5a13%2013%200%200%201%20.072%202.1L16.6%2028.985a13%2013%200%200%201-2.1-.072m5.561-.56l8.292-8.293a13.03%2013.03%200%200%201-8.292%208.292M3.647%2011.938a13.03%2013.03%200%200%201%208.292-8.292z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-emoji-high-contrast/purple-circle.svg?color=%231a73e8&size=48
