color icon
color-32-light from Fluent UI System Icons by Microsoft Corporation · 32 Light · MIT Free for personal and commercial use.
- Name
- color-32-light
- Set
- Fluent UI System Icons
- Style
- 32 Light
- Viewbox
- 32×32
- License
- MIT
10 other variants in Fluent UI System Icons
The same icon in other sets
Related icons in Fluent UI System Icons
Use the color icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M15.5 8a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m7.5.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m1.5 6.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 4.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M20.5 25a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M15.809 2.001c-4.319 0-8.219 2.212-10.743 5.052c-2.5 2.813-3.78 6.407-2.52 9.181c.337.74.74 1.288 1.212 1.666c.478.382 1.003.57 1.545.621c1.048.1 2.16-.315 3.147-.715l.399-.164c.88-.362 1.667-.686 2.38-.766c.394-.044.73-.007 1.022.122c.29.128.578.366.847.797c.413.66.663 1.562.874 2.625c.076.383.148.792.222 1.213c.123.705.252 1.44.415 2.131c.265 1.123.642 2.24 1.306 3.154c.676.93 1.634 1.63 3.011 1.93c2.731.598 5.532-.647 7.616-2.953c2.09-2.312 3.51-5.736 3.51-9.65c0-7.867-6.377-14.244-14.243-14.244M3.457 15.821c-1.017-2.236-.042-5.405 2.356-8.103C8.187 5.048 11.829 3 15.809 3c7.314 0 13.244 5.93 13.244 13.244c0 3.676-1.335 6.858-3.253 8.98c-1.923 2.127-4.382 3.145-6.66 2.647c-1.129-.247-1.879-.803-2.416-1.542c-.548-.755-.887-1.72-1.142-2.796c-.158-.671-.275-1.343-.393-2.02c-.075-.427-.15-.857-.236-1.289c-.213-1.074-.49-2.133-1.007-2.96c-.356-.57-.788-.959-1.29-1.181c-.498-.22-1.023-.26-1.538-.201c-.866.097-1.8.483-2.662.84l-.382.156c-1.017.413-1.908.72-2.677.647a1.85 1.85 0 0 1-1.015-.407c-.318-.254-.635-.66-.925-1.299"/></svg>
React
import type { SVGProps } from "react";
export function FluentColor32Light(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="M15.5 8a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m7.5.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m1.5 6.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 4.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M20.5 25a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M15.809 2.001c-4.319 0-8.219 2.212-10.743 5.052c-2.5 2.813-3.78 6.407-2.52 9.181c.337.74.74 1.288 1.212 1.666c.478.382 1.003.57 1.545.621c1.048.1 2.16-.315 3.147-.715l.399-.164c.88-.362 1.667-.686 2.38-.766c.394-.044.73-.007 1.022.122c.29.128.578.366.847.797c.413.66.663 1.562.874 2.625c.076.383.148.792.222 1.213c.123.705.252 1.44.415 2.131c.265 1.123.642 2.24 1.306 3.154c.676.93 1.634 1.63 3.011 1.93c2.731.598 5.532-.647 7.616-2.953c2.09-2.312 3.51-5.736 3.51-9.65c0-7.867-6.377-14.244-14.243-14.244M3.457 15.821c-1.017-2.236-.042-5.405 2.356-8.103C8.187 5.048 11.829 3 15.809 3c7.314 0 13.244 5.93 13.244 13.244c0 3.676-1.335 6.858-3.253 8.98c-1.923 2.127-4.382 3.145-6.66 2.647c-1.129-.247-1.879-.803-2.416-1.542c-.548-.755-.887-1.72-1.142-2.796c-.158-.671-.275-1.343-.393-2.02c-.075-.427-.15-.857-.236-1.289c-.213-1.074-.49-2.133-1.007-2.96c-.356-.57-.788-.959-1.29-1.181c-.498-.22-1.023-.26-1.538-.201c-.866.097-1.8.483-2.662.84l-.382.156c-1.017.413-1.908.72-2.677.647a1.85 1.85 0 0 1-1.015-.407c-.318-.254-.635-.66-.925-1.299"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M15.5 8a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m7.5.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m1.5 6.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 4.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M20.5 25a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M15.809 2.001c-4.319 0-8.219 2.212-10.743 5.052c-2.5 2.813-3.78 6.407-2.52 9.181c.337.74.74 1.288 1.212 1.666c.478.382 1.003.57 1.545.621c1.048.1 2.16-.315 3.147-.715l.399-.164c.88-.362 1.667-.686 2.38-.766c.394-.044.73-.007 1.022.122c.29.128.578.366.847.797c.413.66.663 1.562.874 2.625c.076.383.148.792.222 1.213c.123.705.252 1.44.415 2.131c.265 1.123.642 2.24 1.306 3.154c.676.93 1.634 1.63 3.011 1.93c2.731.598 5.532-.647 7.616-2.953c2.09-2.312 3.51-5.736 3.51-9.65c0-7.867-6.377-14.244-14.243-14.244M3.457 15.821c-1.017-2.236-.042-5.405 2.356-8.103C8.187 5.048 11.829 3 15.809 3c7.314 0 13.244 5.93 13.244 13.244c0 3.676-1.335 6.858-3.253 8.98c-1.923 2.127-4.382 3.145-6.66 2.647c-1.129-.247-1.879-.803-2.416-1.542c-.548-.755-.887-1.72-1.142-2.796c-.158-.671-.275-1.343-.393-2.02c-.075-.427-.15-.857-.236-1.289c-.213-1.074-.49-2.133-1.007-2.96c-.356-.57-.788-.959-1.29-1.181c-.498-.22-1.023-.26-1.538-.201c-.866.097-1.8.483-2.662.84l-.382.156c-1.017.413-1.908.72-2.677.647a1.85 1.85 0 0 1-1.015-.407c-.318-.254-.635-.66-.925-1.299"/></svg> </template>
CSS
.icon-color-32-light {
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%22M15.5%208a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203m7.5.5a1.5%201.5%200%201%201-3%200a1.5%201.5%200%200%201%203%200m1.5%206.5a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203m1.5%204.5a1.5%201.5%200%201%201-3%200a1.5%201.5%200%200%201%203%200M20.5%2025a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203M15.809%202.001c-4.319%200-8.219%202.212-10.743%205.052c-2.5%202.813-3.78%206.407-2.52%209.181c.337.74.74%201.288%201.212%201.666c.478.382%201.003.57%201.545.621c1.048.1%202.16-.315%203.147-.715l.399-.164c.88-.362%201.667-.686%202.38-.766c.394-.044.73-.007%201.022.122c.29.128.578.366.847.797c.413.66.663%201.562.874%202.625c.076.383.148.792.222%201.213c.123.705.252%201.44.415%202.131c.265%201.123.642%202.24%201.306%203.154c.676.93%201.634%201.63%203.011%201.93c2.731.598%205.532-.647%207.616-2.953c2.09-2.312%203.51-5.736%203.51-9.65c0-7.867-6.377-14.244-14.243-14.244M3.457%2015.821c-1.017-2.236-.042-5.405%202.356-8.103C8.187%205.048%2011.829%203%2015.809%203c7.314%200%2013.244%205.93%2013.244%2013.244c0%203.676-1.335%206.858-3.253%208.98c-1.923%202.127-4.382%203.145-6.66%202.647c-1.129-.247-1.879-.803-2.416-1.542c-.548-.755-.887-1.72-1.142-2.796c-.158-.671-.275-1.343-.393-2.02c-.075-.427-.15-.857-.236-1.289c-.213-1.074-.49-2.133-1.007-2.96c-.356-.57-.788-.959-1.29-1.181c-.498-.22-1.023-.26-1.538-.201c-.866.097-1.8.483-2.662.84l-.382.156c-1.017.413-1.908.72-2.677.647a1.85%201.85%200%200%201-1.015-.407c-.318-.254-.635-.66-.925-1.299%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%22M15.5%208a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203m7.5.5a1.5%201.5%200%201%201-3%200a1.5%201.5%200%200%201%203%200m1.5%206.5a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203m1.5%204.5a1.5%201.5%200%201%201-3%200a1.5%201.5%200%200%201%203%200M20.5%2025a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203M15.809%202.001c-4.319%200-8.219%202.212-10.743%205.052c-2.5%202.813-3.78%206.407-2.52%209.181c.337.74.74%201.288%201.212%201.666c.478.382%201.003.57%201.545.621c1.048.1%202.16-.315%203.147-.715l.399-.164c.88-.362%201.667-.686%202.38-.766c.394-.044.73-.007%201.022.122c.29.128.578.366.847.797c.413.66.663%201.562.874%202.625c.076.383.148.792.222%201.213c.123.705.252%201.44.415%202.131c.265%201.123.642%202.24%201.306%203.154c.676.93%201.634%201.63%203.011%201.93c2.731.598%205.532-.647%207.616-2.953c2.09-2.312%203.51-5.736%203.51-9.65c0-7.867-6.377-14.244-14.243-14.244M3.457%2015.821c-1.017-2.236-.042-5.405%202.356-8.103C8.187%205.048%2011.829%203%2015.809%203c7.314%200%2013.244%205.93%2013.244%2013.244c0%203.676-1.335%206.858-3.253%208.98c-1.923%202.127-4.382%203.145-6.66%202.647c-1.129-.247-1.879-.803-2.416-1.542c-.548-.755-.887-1.72-1.142-2.796c-.158-.671-.275-1.343-.393-2.02c-.075-.427-.15-.857-.236-1.289c-.213-1.074-.49-2.133-1.007-2.96c-.356-.57-.788-.959-1.29-1.181c-.498-.22-1.023-.26-1.538-.201c-.866.097-1.8.483-2.662.84l-.382.156c-1.017.413-1.908.72-2.677.647a1.85%201.85%200%200%201-1.015-.407c-.318-.254-.635-.66-.925-1.299%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/color-32-light.svg?color=%231a73e8&size=48
