diversity icon
diversity-16 from Fluent UI System Color Icons by Microsoft Corporation · 16 · MIT Free for personal and commercial use.
- Name
- diversity-16
- Set
- Fluent UI System Color Icons
- Style
- 16
- Viewbox
- 16×16
- License
- MIT
4 other variants in Fluent UI System Color Icons
The same icon in other sets
Use the diversity icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGnm3pKbEv)" d="M12.495 8.831a1 1 0 0 0-1 0l-1.99 1.15a1 1 0 0 0-.5.865v2.298a1 1 0 0 0 .5.866l1.99 1.149a1 1 0 0 0 1 0l1.99-1.15a1 1 0 0 0 .5-.865v-2.298a1 1 0 0 0-.5-.866z"/><path fill="url(#SVGoX6x2bBj)" d="M4 9a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGWDh1SdIq)" d="M10.5 1A1.5 1.5 0 0 0 9 2.5v3A1.5 1.5 0 0 0 10.5 7h3A1.5 1.5 0 0 0 15 5.5v-3A1.5 1.5 0 0 0 13.5 1z"/><path fill="url(#SVGMXa3Gcni)" d="M2.913 1.674a1.214 1.214 0 0 1 2.174 0l1.78 3.537C7.277 6.03 6.688 7 5.778 7H2.22c-.91 0-1.5-.97-1.087-1.79z"/><defs><linearGradient id="SVGnm3pKbEv" x1="5.517" x2="13.624" y1="5.949" y2="14.339" gradientUnits="userSpaceOnUse"><stop stop-color="#52d17c"/><stop offset="1" stop-color="#22918b"/></linearGradient><linearGradient id="SVGoX6x2bBj" x1="1" x2="7" y1="9" y2="15" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGWDh1SdIq" x1="6.5" x2="13.875" y1="-2" y2="7.563" gradientUnits="userSpaceOnUse"><stop stop-color="#ffcd0f"/><stop offset="1" stop-color="#fe8401"/></linearGradient><linearGradient id="SVGMXa3Gcni" x1="1.214" x2="5.355" y1="2.125" y2="6.427" gradientUnits="userSpaceOnUse"><stop stop-color="#f24a9d"/><stop offset="1" stop-color="#d7257d"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorDiversity16(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGnm3pKbEv)" d="M12.495 8.831a1 1 0 0 0-1 0l-1.99 1.15a1 1 0 0 0-.5.865v2.298a1 1 0 0 0 .5.866l1.99 1.149a1 1 0 0 0 1 0l1.99-1.15a1 1 0 0 0 .5-.865v-2.298a1 1 0 0 0-.5-.866z"/><path fill="url(#SVGoX6x2bBj)" d="M4 9a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGWDh1SdIq)" d="M10.5 1A1.5 1.5 0 0 0 9 2.5v3A1.5 1.5 0 0 0 10.5 7h3A1.5 1.5 0 0 0 15 5.5v-3A1.5 1.5 0 0 0 13.5 1z"/><path fill="url(#SVGMXa3Gcni)" d="M2.913 1.674a1.214 1.214 0 0 1 2.174 0l1.78 3.537C7.277 6.03 6.688 7 5.778 7H2.22c-.91 0-1.5-.97-1.087-1.79z"/><defs><linearGradient id="SVGnm3pKbEv" x1="5.517" x2="13.624" y1="5.949" y2="14.339" gradientUnits="userSpaceOnUse"><stop stopColor="#52d17c"/><stop offset="1" stopColor="#22918b"/></linearGradient><linearGradient id="SVGoX6x2bBj" x1="1" x2="7" y1="9" y2="15" gradientUnits="userSpaceOnUse"><stop stopColor="#0fafff"/><stop offset="1" stopColor="#2764e7"/></linearGradient><linearGradient id="SVGWDh1SdIq" x1="6.5" x2="13.875" y1="-2" y2="7.563" gradientUnits="userSpaceOnUse"><stop stopColor="#ffcd0f"/><stop offset="1" stopColor="#fe8401"/></linearGradient><linearGradient id="SVGMXa3Gcni" x1="1.214" x2="5.355" y1="2.125" y2="6.427" gradientUnits="userSpaceOnUse"><stop stopColor="#f24a9d"/><stop offset="1" stopColor="#d7257d"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGnm3pKbEv)" d="M12.495 8.831a1 1 0 0 0-1 0l-1.99 1.15a1 1 0 0 0-.5.865v2.298a1 1 0 0 0 .5.866l1.99 1.149a1 1 0 0 0 1 0l1.99-1.15a1 1 0 0 0 .5-.865v-2.298a1 1 0 0 0-.5-.866z"/><path fill="url(#SVGoX6x2bBj)" d="M4 9a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGWDh1SdIq)" d="M10.5 1A1.5 1.5 0 0 0 9 2.5v3A1.5 1.5 0 0 0 10.5 7h3A1.5 1.5 0 0 0 15 5.5v-3A1.5 1.5 0 0 0 13.5 1z"/><path fill="url(#SVGMXa3Gcni)" d="M2.913 1.674a1.214 1.214 0 0 1 2.174 0l1.78 3.537C7.277 6.03 6.688 7 5.778 7H2.22c-.91 0-1.5-.97-1.087-1.79z"/><defs><linearGradient id="SVGnm3pKbEv" x1="5.517" x2="13.624" y1="5.949" y2="14.339" gradientUnits="userSpaceOnUse"><stop stop-color="#52d17c"/><stop offset="1" stop-color="#22918b"/></linearGradient><linearGradient id="SVGoX6x2bBj" x1="1" x2="7" y1="9" y2="15" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGWDh1SdIq" x1="6.5" x2="13.875" y1="-2" y2="7.563" gradientUnits="userSpaceOnUse"><stop stop-color="#ffcd0f"/><stop offset="1" stop-color="#fe8401"/></linearGradient><linearGradient id="SVGMXa3Gcni" x1="1.214" x2="5.355" y1="2.125" y2="6.427" gradientUnits="userSpaceOnUse"><stop stop-color="#f24a9d"/><stop offset="1" stop-color="#d7257d"/></linearGradient></defs></g></svg> </template>
CSS
.icon-diversity-16 {
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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGnm3pKbEv)%22%20d%3D%22M12.495%208.831a1%201%200%200%200-1%200l-1.99%201.15a1%201%200%200%200-.5.865v2.298a1%201%200%200%200%20.5.866l1.99%201.149a1%201%200%200%200%201%200l1.99-1.15a1%201%200%200%200%20.5-.865v-2.298a1%201%200%200%200-.5-.866z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGoX6x2bBj)%22%20d%3D%22M4%209a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGWDh1SdIq)%22%20d%3D%22M10.5%201A1.5%201.5%200%200%200%209%202.5v3A1.5%201.5%200%200%200%2010.5%207h3A1.5%201.5%200%200%200%2015%205.5v-3A1.5%201.5%200%200%200%2013.5%201z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGMXa3Gcni)%22%20d%3D%22M2.913%201.674a1.214%201.214%200%200%201%202.174%200l1.78%203.537C7.277%206.03%206.688%207%205.778%207H2.22c-.91%200-1.5-.97-1.087-1.79z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGnm3pKbEv%22%20x1%3D%225.517%22%20x2%3D%2213.624%22%20y1%3D%225.949%22%20y2%3D%2214.339%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2352d17c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2322918b%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGoX6x2bBj%22%20x1%3D%221%22%20x2%3D%227%22%20y1%3D%229%22%20y2%3D%2215%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%22SVGWDh1SdIq%22%20x1%3D%226.5%22%20x2%3D%2213.875%22%20y1%3D%22-2%22%20y2%3D%227.563%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffcd0f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fe8401%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGMXa3Gcni%22%20x1%3D%221.214%22%20x2%3D%225.355%22%20y1%3D%222.125%22%20y2%3D%226.427%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f24a9d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d7257d%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGnm3pKbEv)%22%20d%3D%22M12.495%208.831a1%201%200%200%200-1%200l-1.99%201.15a1%201%200%200%200-.5.865v2.298a1%201%200%200%200%20.5.866l1.99%201.149a1%201%200%200%200%201%200l1.99-1.15a1%201%200%200%200%20.5-.865v-2.298a1%201%200%200%200-.5-.866z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGoX6x2bBj)%22%20d%3D%22M4%209a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGWDh1SdIq)%22%20d%3D%22M10.5%201A1.5%201.5%200%200%200%209%202.5v3A1.5%201.5%200%200%200%2010.5%207h3A1.5%201.5%200%200%200%2015%205.5v-3A1.5%201.5%200%200%200%2013.5%201z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGMXa3Gcni)%22%20d%3D%22M2.913%201.674a1.214%201.214%200%200%201%202.174%200l1.78%203.537C7.277%206.03%206.688%207%205.778%207H2.22c-.91%200-1.5-.97-1.087-1.79z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGnm3pKbEv%22%20x1%3D%225.517%22%20x2%3D%2213.624%22%20y1%3D%225.949%22%20y2%3D%2214.339%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2352d17c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2322918b%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGoX6x2bBj%22%20x1%3D%221%22%20x2%3D%227%22%20y1%3D%229%22%20y2%3D%2215%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%22SVGWDh1SdIq%22%20x1%3D%226.5%22%20x2%3D%2213.875%22%20y1%3D%22-2%22%20y2%3D%227.563%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffcd0f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fe8401%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGMXa3Gcni%22%20x1%3D%221.214%22%20x2%3D%225.355%22%20y1%3D%222.125%22%20y2%3D%226.427%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f24a9d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d7257d%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/diversity-16.svg?color=%231a73e8&size=48
