people circle icon
people-circle-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.
- Name
- people-circle-outline
- Set
- IonIcons
- Style
- Outline
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
Use the people circle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 464c-114.69 0-208-93.31-208-208S141.31 48 256 48s208 93.31 208 208s-93.31 208-208 208m0-384c-97 0-176 79-176 176s79 176 176 176s176-78.95 176-176S353.05 80 256 80"/><path fill="currentColor" d="M323.67 292c-17.4 0-34.21-7.72-47.34-21.73a83.76 83.76 0 0 1-22-51.32c-1.47-20.7 4.88-39.75 17.88-53.62S303.38 144 323.67 144c20.14 0 38.37 7.62 51.33 21.46s19.47 33 18 53.51a84 84 0 0 1-22 51.3C357.86 284.28 341.06 292 323.67 292m-159.85 3.36c-29.76 0-55.93-27.51-58.33-61.33c-1.23-17.32 4.15-33.33 15.17-45.08s26.22-18 43.15-18s32.12 6.44 43.07 18.14s16.5 27.82 15.25 45c-2.44 33.77-28.6 61.27-58.31 61.27m256.55 59.92c-1.59-4.7-5.46-9.71-13.22-14.46c-23.46-14.33-52.32-21.91-83.48-21.91c-30.57 0-60.23 7.9-83.53 22.25c-26.25 16.17-43.89 39.75-51 68.18c-1.68 6.69-4.13 19.14-1.51 26.11a192.18 192.18 0 0 0 232.75-80.17Zm-256.74 46.09c7.07-28.21 22.12-51.73 45.47-70.75a8 8 0 0 0-2.59-13.77c-12-3.83-25.7-5.88-42.69-5.88c-23.82 0-49.11 6.45-68.14 18.17c-5.4 3.33-10.7 4.61-14.78 5.75a192.84 192.84 0 0 0 77.78 86.64l1.79-.14a103 103 0 0 1 3.16-20.02"/></svg>
React
import type { SVGProps } from "react";
export function IonPeopleCircleOutline(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="M256 464c-114.69 0-208-93.31-208-208S141.31 48 256 48s208 93.31 208 208s-93.31 208-208 208m0-384c-97 0-176 79-176 176s79 176 176 176s176-78.95 176-176S353.05 80 256 80"/><path fill="currentColor" d="M323.67 292c-17.4 0-34.21-7.72-47.34-21.73a83.76 83.76 0 0 1-22-51.32c-1.47-20.7 4.88-39.75 17.88-53.62S303.38 144 323.67 144c20.14 0 38.37 7.62 51.33 21.46s19.47 33 18 53.51a84 84 0 0 1-22 51.3C357.86 284.28 341.06 292 323.67 292m-159.85 3.36c-29.76 0-55.93-27.51-58.33-61.33c-1.23-17.32 4.15-33.33 15.17-45.08s26.22-18 43.15-18s32.12 6.44 43.07 18.14s16.5 27.82 15.25 45c-2.44 33.77-28.6 61.27-58.31 61.27m256.55 59.92c-1.59-4.7-5.46-9.71-13.22-14.46c-23.46-14.33-52.32-21.91-83.48-21.91c-30.57 0-60.23 7.9-83.53 22.25c-26.25 16.17-43.89 39.75-51 68.18c-1.68 6.69-4.13 19.14-1.51 26.11a192.18 192.18 0 0 0 232.75-80.17Zm-256.74 46.09c7.07-28.21 22.12-51.73 45.47-70.75a8 8 0 0 0-2.59-13.77c-12-3.83-25.7-5.88-42.69-5.88c-23.82 0-49.11 6.45-68.14 18.17c-5.4 3.33-10.7 4.61-14.78 5.75a192.84 192.84 0 0 0 77.78 86.64l1.79-.14a103 103 0 0 1 3.16-20.02"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 464c-114.69 0-208-93.31-208-208S141.31 48 256 48s208 93.31 208 208s-93.31 208-208 208m0-384c-97 0-176 79-176 176s79 176 176 176s176-78.95 176-176S353.05 80 256 80"/><path fill="currentColor" d="M323.67 292c-17.4 0-34.21-7.72-47.34-21.73a83.76 83.76 0 0 1-22-51.32c-1.47-20.7 4.88-39.75 17.88-53.62S303.38 144 323.67 144c20.14 0 38.37 7.62 51.33 21.46s19.47 33 18 53.51a84 84 0 0 1-22 51.3C357.86 284.28 341.06 292 323.67 292m-159.85 3.36c-29.76 0-55.93-27.51-58.33-61.33c-1.23-17.32 4.15-33.33 15.17-45.08s26.22-18 43.15-18s32.12 6.44 43.07 18.14s16.5 27.82 15.25 45c-2.44 33.77-28.6 61.27-58.31 61.27m256.55 59.92c-1.59-4.7-5.46-9.71-13.22-14.46c-23.46-14.33-52.32-21.91-83.48-21.91c-30.57 0-60.23 7.9-83.53 22.25c-26.25 16.17-43.89 39.75-51 68.18c-1.68 6.69-4.13 19.14-1.51 26.11a192.18 192.18 0 0 0 232.75-80.17Zm-256.74 46.09c7.07-28.21 22.12-51.73 45.47-70.75a8 8 0 0 0-2.59-13.77c-12-3.83-25.7-5.88-42.69-5.88c-23.82 0-49.11 6.45-68.14 18.17c-5.4 3.33-10.7 4.61-14.78 5.75a192.84 192.84 0 0 0 77.78 86.64l1.79-.14a103 103 0 0 1 3.16-20.02"/></svg> </template>
CSS
.icon-people-circle-outline {
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%22M256%20464c-114.69%200-208-93.31-208-208S141.31%2048%20256%2048s208%2093.31%20208%20208s-93.31%20208-208%20208m0-384c-97%200-176%2079-176%20176s79%20176%20176%20176s176-78.95%20176-176S353.05%2080%20256%2080%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M323.67%20292c-17.4%200-34.21-7.72-47.34-21.73a83.76%2083.76%200%200%201-22-51.32c-1.47-20.7%204.88-39.75%2017.88-53.62S303.38%20144%20323.67%20144c20.14%200%2038.37%207.62%2051.33%2021.46s19.47%2033%2018%2053.51a84%2084%200%200%201-22%2051.3C357.86%20284.28%20341.06%20292%20323.67%20292m-159.85%203.36c-29.76%200-55.93-27.51-58.33-61.33c-1.23-17.32%204.15-33.33%2015.17-45.08s26.22-18%2043.15-18s32.12%206.44%2043.07%2018.14s16.5%2027.82%2015.25%2045c-2.44%2033.77-28.6%2061.27-58.31%2061.27m256.55%2059.92c-1.59-4.7-5.46-9.71-13.22-14.46c-23.46-14.33-52.32-21.91-83.48-21.91c-30.57%200-60.23%207.9-83.53%2022.25c-26.25%2016.17-43.89%2039.75-51%2068.18c-1.68%206.69-4.13%2019.14-1.51%2026.11a192.18%20192.18%200%200%200%20232.75-80.17Zm-256.74%2046.09c7.07-28.21%2022.12-51.73%2045.47-70.75a8%208%200%200%200-2.59-13.77c-12-3.83-25.7-5.88-42.69-5.88c-23.82%200-49.11%206.45-68.14%2018.17c-5.4%203.33-10.7%204.61-14.78%205.75a192.84%20192.84%200%200%200%2077.78%2086.64l1.79-.14a103%20103%200%200%201%203.16-20.02%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%22M256%20464c-114.69%200-208-93.31-208-208S141.31%2048%20256%2048s208%2093.31%20208%20208s-93.31%20208-208%20208m0-384c-97%200-176%2079-176%20176s79%20176%20176%20176s176-78.95%20176-176S353.05%2080%20256%2080%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M323.67%20292c-17.4%200-34.21-7.72-47.34-21.73a83.76%2083.76%200%200%201-22-51.32c-1.47-20.7%204.88-39.75%2017.88-53.62S303.38%20144%20323.67%20144c20.14%200%2038.37%207.62%2051.33%2021.46s19.47%2033%2018%2053.51a84%2084%200%200%201-22%2051.3C357.86%20284.28%20341.06%20292%20323.67%20292m-159.85%203.36c-29.76%200-55.93-27.51-58.33-61.33c-1.23-17.32%204.15-33.33%2015.17-45.08s26.22-18%2043.15-18s32.12%206.44%2043.07%2018.14s16.5%2027.82%2015.25%2045c-2.44%2033.77-28.6%2061.27-58.31%2061.27m256.55%2059.92c-1.59-4.7-5.46-9.71-13.22-14.46c-23.46-14.33-52.32-21.91-83.48-21.91c-30.57%200-60.23%207.9-83.53%2022.25c-26.25%2016.17-43.89%2039.75-51%2068.18c-1.68%206.69-4.13%2019.14-1.51%2026.11a192.18%20192.18%200%200%200%20232.75-80.17Zm-256.74%2046.09c7.07-28.21%2022.12-51.73%2045.47-70.75a8%208%200%200%200-2.59-13.77c-12-3.83-25.7-5.88-42.69-5.88c-23.82%200-49.11%206.45-68.14%2018.17c-5.4%203.33-10.7%204.61-14.78%205.75a192.84%20192.84%200%200%200%2077.78%2086.64l1.79-.14a103%20103%200%200%201%203.16-20.02%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/people-circle-outline.svg?color=%231a73e8&size=48
