question circle icon
question-circle-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.
- Name
- question-circle-28
- Set
- Fluent UI System Color Icons
- Style
- 28
- Viewbox
- 28×28
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
question-circle-filledAnt Design Iconsquestion-circleBootstrap Iconsquestion-circleFramework7 Iconsquestion-circleFont Awesome Regularquestion-circleFont Awesome Solidquestion-circle-outlineFlowbite Iconsquestion-circle-12-filledFluent UI System Iconsquestion-circleHealth Iconsquestion-circleLine Awesomequestion-circleMaterial Line Iconsquestion-circleMajesticonsquestion-circleMyna UI Iconsquestion-circlePrime Iconsquestion-circle-boldSolarquestion-circleTabler Iconsquestion-circle-outlineTeenyiconsquestion-circleUnicons
Use the question circle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="#212121" d="M14 2c6.627 0 12 5.373 12 12s-5.373 12-12 12S2 20.627 2 14S7.373 2 14 2"/><path fill="url(#SVGLDO7yOmC)" d="M14 2c6.627 0 12 5.373 12 12s-5.373 12-12 12S2 20.627 2 14S7.373 2 14 2"/><path fill="#d9d9d9" d="M14 18.5a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m0-11.75c1.963 0 3.75 1.725 3.75 3.75c0 1.431-.465 2.274-1.546 3.306l-.197.184l-.204.187c-.806.738-1.053 1.125-1.053 1.823a.75.75 0 0 1-1.5 0c0-1.149.398-1.842 1.343-2.745l.57-.528c.81-.772 1.087-1.285 1.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25 1.066-2.25 2.25a.75.75 0 0 1-1.5 0c0-2.025 1.787-3.75 3.75-3.75"/><path fill="url(#SVGD8Z27dFw)" d="M14 18.5a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m0-11.75c1.963 0 3.75 1.725 3.75 3.75c0 1.431-.465 2.274-1.546 3.306l-.197.184l-.204.187c-.806.738-1.053 1.125-1.053 1.823a.75.75 0 0 1-1.5 0c0-1.149.398-1.842 1.343-2.745l.57-.528c.81-.772 1.087-1.285 1.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25 1.066-2.25 2.25a.75.75 0 0 1-1.5 0c0-2.025 1.787-3.75 3.75-3.75"/><defs><linearGradient id="SVGLDO7yOmC" x1="2" x2="26" y1="2" y2="26" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGD8Z27dFw" x1="10.906" x2="15.148" y1="7" y2="21.39" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorQuestionCircle28(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="#212121" d="M14 2c6.627 0 12 5.373 12 12s-5.373 12-12 12S2 20.627 2 14S7.373 2 14 2"/><path fill="url(#SVGLDO7yOmC)" d="M14 2c6.627 0 12 5.373 12 12s-5.373 12-12 12S2 20.627 2 14S7.373 2 14 2"/><path fill="#d9d9d9" d="M14 18.5a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m0-11.75c1.963 0 3.75 1.725 3.75 3.75c0 1.431-.465 2.274-1.546 3.306l-.197.184l-.204.187c-.806.738-1.053 1.125-1.053 1.823a.75.75 0 0 1-1.5 0c0-1.149.398-1.842 1.343-2.745l.57-.528c.81-.772 1.087-1.285 1.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25 1.066-2.25 2.25a.75.75 0 0 1-1.5 0c0-2.025 1.787-3.75 3.75-3.75"/><path fill="url(#SVGD8Z27dFw)" d="M14 18.5a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m0-11.75c1.963 0 3.75 1.725 3.75 3.75c0 1.431-.465 2.274-1.546 3.306l-.197.184l-.204.187c-.806.738-1.053 1.125-1.053 1.823a.75.75 0 0 1-1.5 0c0-1.149.398-1.842 1.343-2.745l.57-.528c.81-.772 1.087-1.285 1.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25 1.066-2.25 2.25a.75.75 0 0 1-1.5 0c0-2.025 1.787-3.75 3.75-3.75"/><defs><linearGradient id="SVGLDO7yOmC" x1="2" x2="26" y1="2" y2="26" gradientUnits="userSpaceOnUse"><stop stopColor="#0fafff"/><stop offset="1" stopColor="#2764e7"/></linearGradient><linearGradient id="SVGD8Z27dFw" x1="10.906" x2="15.148" y1="7" y2="21.39" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#cceaff"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="#212121" d="M14 2c6.627 0 12 5.373 12 12s-5.373 12-12 12S2 20.627 2 14S7.373 2 14 2"/><path fill="url(#SVGLDO7yOmC)" d="M14 2c6.627 0 12 5.373 12 12s-5.373 12-12 12S2 20.627 2 14S7.373 2 14 2"/><path fill="#d9d9d9" d="M14 18.5a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m0-11.75c1.963 0 3.75 1.725 3.75 3.75c0 1.431-.465 2.274-1.546 3.306l-.197.184l-.204.187c-.806.738-1.053 1.125-1.053 1.823a.75.75 0 0 1-1.5 0c0-1.149.398-1.842 1.343-2.745l.57-.528c.81-.772 1.087-1.285 1.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25 1.066-2.25 2.25a.75.75 0 0 1-1.5 0c0-2.025 1.787-3.75 3.75-3.75"/><path fill="url(#SVGD8Z27dFw)" d="M14 18.5a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m0-11.75c1.963 0 3.75 1.725 3.75 3.75c0 1.431-.465 2.274-1.546 3.306l-.197.184l-.204.187c-.806.738-1.053 1.125-1.053 1.823a.75.75 0 0 1-1.5 0c0-1.149.398-1.842 1.343-2.745l.57-.528c.81-.772 1.087-1.285 1.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25 1.066-2.25 2.25a.75.75 0 0 1-1.5 0c0-2.025 1.787-3.75 3.75-3.75"/><defs><linearGradient id="SVGLDO7yOmC" x1="2" x2="26" y1="2" y2="26" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGD8Z27dFw" x1="10.906" x2="15.148" y1="7" y2="21.39" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient></defs></g></svg> </template>
CSS
.icon-question-circle-28 {
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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M14%202c6.627%200%2012%205.373%2012%2012s-5.373%2012-12%2012S2%2020.627%202%2014S7.373%202%2014%202%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGLDO7yOmC)%22%20d%3D%22M14%202c6.627%200%2012%205.373%2012%2012s-5.373%2012-12%2012S2%2020.627%202%2014S7.373%202%2014%202%22%2F%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M14%2018.5a1.25%201.25%200%201%201%200%202.5a1.25%201.25%200%200%201%200-2.5m0-11.75c1.963%200%203.75%201.725%203.75%203.75c0%201.431-.465%202.274-1.546%203.306l-.197.184l-.204.187c-.806.738-1.053%201.125-1.053%201.823a.75.75%200%200%201-1.5%200c0-1.149.398-1.842%201.343-2.745l.57-.528c.81-.772%201.087-1.285%201.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25%201.066-2.25%202.25a.75.75%200%200%201-1.5%200c0-2.025%201.787-3.75%203.75-3.75%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGD8Z27dFw)%22%20d%3D%22M14%2018.5a1.25%201.25%200%201%201%200%202.5a1.25%201.25%200%200%201%200-2.5m0-11.75c1.963%200%203.75%201.725%203.75%203.75c0%201.431-.465%202.274-1.546%203.306l-.197.184l-.204.187c-.806.738-1.053%201.125-1.053%201.823a.75.75%200%200%201-1.5%200c0-1.149.398-1.842%201.343-2.745l.57-.528c.81-.772%201.087-1.285%201.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25%201.066-2.25%202.25a.75.75%200%200%201-1.5%200c0-2.025%201.787-3.75%203.75-3.75%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGLDO7yOmC%22%20x1%3D%222%22%20x2%3D%2226%22%20y1%3D%222%22%20y2%3D%2226%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232764e7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGD8Z27dFw%22%20x1%3D%2210.906%22%20x2%3D%2215.148%22%20y1%3D%227%22%20y2%3D%2221.39%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M14%202c6.627%200%2012%205.373%2012%2012s-5.373%2012-12%2012S2%2020.627%202%2014S7.373%202%2014%202%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGLDO7yOmC)%22%20d%3D%22M14%202c6.627%200%2012%205.373%2012%2012s-5.373%2012-12%2012S2%2020.627%202%2014S7.373%202%2014%202%22%2F%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M14%2018.5a1.25%201.25%200%201%201%200%202.5a1.25%201.25%200%200%201%200-2.5m0-11.75c1.963%200%203.75%201.725%203.75%203.75c0%201.431-.465%202.274-1.546%203.306l-.197.184l-.204.187c-.806.738-1.053%201.125-1.053%201.823a.75.75%200%200%201-1.5%200c0-1.149.398-1.842%201.343-2.745l.57-.528c.81-.772%201.087-1.285%201.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25%201.066-2.25%202.25a.75.75%200%200%201-1.5%200c0-2.025%201.787-3.75%203.75-3.75%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGD8Z27dFw)%22%20d%3D%22M14%2018.5a1.25%201.25%200%201%201%200%202.5a1.25%201.25%200%200%201%200-2.5m0-11.75c1.963%200%203.75%201.725%203.75%203.75c0%201.431-.465%202.274-1.546%203.306l-.197.184l-.204.187c-.806.738-1.053%201.125-1.053%201.823a.75.75%200%200%201-1.5%200c0-1.149.398-1.842%201.343-2.745l.57-.528c.81-.772%201.087-1.285%201.087-2.227c0-1.184-1.104-2.25-2.25-2.25s-2.25%201.066-2.25%202.25a.75.75%200%200%201-1.5%200c0-2.025%201.787-3.75%203.75-3.75%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGLDO7yOmC%22%20x1%3D%222%22%20x2%3D%2226%22%20y1%3D%222%22%20y2%3D%2226%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232764e7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGD8Z27dFw%22%20x1%3D%2210.906%22%20x2%3D%2215.148%22%20y1%3D%227%22%20y2%3D%2221.39%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/question-circle-28.svg?color=%231a73e8&size=48
