cool icon
cool from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- cool
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-cool
The same icon in other sets
Use the cool icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M14.683 14.828a4.1 4.1 0 0 1-1.272.858a4 4 0 0 1-4.875-1.45l-1.658 1.119a6.1 6.1 0 0 0 1.621 1.62a6 6 0 0 0 2.148.903a6.04 6.04 0 0 0 3.542-.35a6 6 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4 4 0 0 1-.489.592"/><path fill="currentColor" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2m0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4m0 16c-4.411 0-8-3.589-8-8c0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2c0 4.411-3.589 8-8 8"/></svg>
React
import type { SVGProps } from "react";
export function BxCool(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M14.683 14.828a4.1 4.1 0 0 1-1.272.858a4 4 0 0 1-4.875-1.45l-1.658 1.119a6.1 6.1 0 0 0 1.621 1.62a6 6 0 0 0 2.148.903a6.04 6.04 0 0 0 3.542-.35a6 6 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4 4 0 0 1-.489.592"/><path fill="currentColor" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2m0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4m0 16c-4.411 0-8-3.589-8-8c0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2c0 4.411-3.589 8-8 8"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M14.683 14.828a4.1 4.1 0 0 1-1.272.858a4 4 0 0 1-4.875-1.45l-1.658 1.119a6.1 6.1 0 0 0 1.621 1.62a6 6 0 0 0 2.148.903a6.04 6.04 0 0 0 3.542-.35a6 6 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4 4 0 0 1-.489.592"/><path fill="currentColor" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2m0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4m0 16c-4.411 0-8-3.589-8-8c0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2c0 4.411-3.589 8-8 8"/></svg> </template>
CSS
.icon-cool {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14.683%2014.828a4.1%204.1%200%200%201-1.272.858a4%204%200%200%201-4.875-1.45l-1.658%201.119a6.1%206.1%200%200%200%201.621%201.62a6%206%200%200%200%202.148.903a6.04%206.04%200%200%200%203.542-.35a6%206%200%200%200%201.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4%204%200%200%201-.489.592%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202C6.486%202%202%206.486%202%2012s4.486%2010%2010%2010s10-4.486%2010-10S17.514%202%2012%202m0%202c2.953%200%205.531%201.613%206.918%204H5.082C6.469%205.613%209.047%204%2012%204m0%2016c-4.411%200-8-3.589-8-8c0-.691.098-1.359.264-2H5v1a2%202%200%200%200%202%202h2a2%202%200%200%200%202-2h2a2%202%200%200%200%202%202h2a2%202%200%200%200%202-2v-1h.736c.166.641.264%201.309.264%202c0%204.411-3.589%208-8%208%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14.683%2014.828a4.1%204.1%200%200%201-1.272.858a4%204%200%200%201-4.875-1.45l-1.658%201.119a6.1%206.1%200%200%200%201.621%201.62a6%206%200%200%200%202.148.903a6.04%206.04%200%200%200%203.542-.35a6%206%200%200%200%201.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4%204%200%200%201-.489.592%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202C6.486%202%202%206.486%202%2012s4.486%2010%2010%2010s10-4.486%2010-10S17.514%202%2012%202m0%202c2.953%200%205.531%201.613%206.918%204H5.082C6.469%205.613%209.047%204%2012%204m0%2016c-4.411%200-8-3.589-8-8c0-.691.098-1.359.264-2H5v1a2%202%200%200%200%202%202h2a2%202%200%200%200%202-2h2a2%202%200%200%200%202%202h2a2%202%200%200%200%202-2v-1h.736c.166.641.264%201.309.264%202c0%204.411-3.589%208-8%208%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/cool.svg?color=%231a73e8&size=48
