cool button emoji
cool-button from Twitter Emoji by Twitter · Default · Symbols · CC-BY-4.0 Attribution required.
- Name
- cool-button
- Set
- Twitter Emoji
- Style
- Default
- Category
- Symbols
- Viewbox
- 36×36
- License
- CC BY 4.0
The same emoji in other sets
More symbols icons from Twitter Emoji
a-button-blood-typeab-button-blood-typeantenna-barsaquariusariesatm-signatom-symbolb-button-blood-typebaby-symbolback-arrowbaggage-claimbiohazardblack-circleblack-large-squareblack-medium-small-squareblack-medium-squareblack-small-squareblack-square-buttonblue-circleblue-squarebright-buttonbrown-circlebrown-squarecancer
Use the cool button emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#3b88c3" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z"/><g fill="#fff"><path d="M5.97 12.858c1.022 0 3.012.336 3.012 1.569c0 .504-.35.939-.869.939c-.574 0-.966-.49-2.143-.49c-1.737 0-2.633 1.471-2.633 3.18c0 1.667.911 3.096 2.633 3.096c1.177 0 1.653-.589 2.227-.589c.63 0 .925.631.925.953c0 1.345-2.115 1.652-3.152 1.652c-2.843 0-4.818-2.255-4.818-5.154c-.001-2.914 1.96-5.156 4.818-5.156"/><path d="M8.865 18.014c0-2.914 1.961-5.155 4.818-5.155c2.815 0 4.819 2.311 4.819 5.155c0 2.899-1.947 5.154-4.819 5.154c-2.843 0-4.818-2.255-4.818-5.154m7.452 0c0-1.695-.882-3.222-2.633-3.222s-2.633 1.526-2.633 3.222c0 1.709.855 3.222 2.633 3.222s2.633-1.513 2.633-3.222m2.656 0c0-2.914 1.96-5.155 4.818-5.155c2.816 0 4.818 2.311 4.818 5.155c0 2.899-1.945 5.154-4.818 5.154c-2.843 0-4.818-2.255-4.818-5.154m7.453 0c0-1.695-.883-3.222-2.635-3.222c-1.75 0-2.633 1.526-2.633 3.222c0 1.709.854 3.222 2.633 3.222c1.779-.001 2.635-1.513 2.635-3.222m2.767-3.979c0-.7.447-1.093 1.051-1.093c.602 0 1.051.393 1.051 1.093v7.032h2.492c.715 0 1.023.532 1.01 1.008a.98.98 0 0 1-1.01.925h-3.502c-.686 0-1.092-.448-1.092-1.148z"/></g></svg>
React
import type { SVGProps } from "react";
export function TwemojiCoolButton(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#3b88c3" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z"/><g fill="#fff"><path d="M5.97 12.858c1.022 0 3.012.336 3.012 1.569c0 .504-.35.939-.869.939c-.574 0-.966-.49-2.143-.49c-1.737 0-2.633 1.471-2.633 3.18c0 1.667.911 3.096 2.633 3.096c1.177 0 1.653-.589 2.227-.589c.63 0 .925.631.925.953c0 1.345-2.115 1.652-3.152 1.652c-2.843 0-4.818-2.255-4.818-5.154c-.001-2.914 1.96-5.156 4.818-5.156"/><path d="M8.865 18.014c0-2.914 1.961-5.155 4.818-5.155c2.815 0 4.819 2.311 4.819 5.155c0 2.899-1.947 5.154-4.819 5.154c-2.843 0-4.818-2.255-4.818-5.154m7.452 0c0-1.695-.882-3.222-2.633-3.222s-2.633 1.526-2.633 3.222c0 1.709.855 3.222 2.633 3.222s2.633-1.513 2.633-3.222m2.656 0c0-2.914 1.96-5.155 4.818-5.155c2.816 0 4.818 2.311 4.818 5.155c0 2.899-1.945 5.154-4.818 5.154c-2.843 0-4.818-2.255-4.818-5.154m7.453 0c0-1.695-.883-3.222-2.635-3.222c-1.75 0-2.633 1.526-2.633 3.222c0 1.709.854 3.222 2.633 3.222c1.779-.001 2.635-1.513 2.635-3.222m2.767-3.979c0-.7.447-1.093 1.051-1.093c.602 0 1.051.393 1.051 1.093v7.032h2.492c.715 0 1.023.532 1.01 1.008a.98.98 0 0 1-1.01.925h-3.502c-.686 0-1.092-.448-1.092-1.148z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#3b88c3" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z"/><g fill="#fff"><path d="M5.97 12.858c1.022 0 3.012.336 3.012 1.569c0 .504-.35.939-.869.939c-.574 0-.966-.49-2.143-.49c-1.737 0-2.633 1.471-2.633 3.18c0 1.667.911 3.096 2.633 3.096c1.177 0 1.653-.589 2.227-.589c.63 0 .925.631.925.953c0 1.345-2.115 1.652-3.152 1.652c-2.843 0-4.818-2.255-4.818-5.154c-.001-2.914 1.96-5.156 4.818-5.156"/><path d="M8.865 18.014c0-2.914 1.961-5.155 4.818-5.155c2.815 0 4.819 2.311 4.819 5.155c0 2.899-1.947 5.154-4.819 5.154c-2.843 0-4.818-2.255-4.818-5.154m7.452 0c0-1.695-.882-3.222-2.633-3.222s-2.633 1.526-2.633 3.222c0 1.709.855 3.222 2.633 3.222s2.633-1.513 2.633-3.222m2.656 0c0-2.914 1.96-5.155 4.818-5.155c2.816 0 4.818 2.311 4.818 5.155c0 2.899-1.945 5.154-4.818 5.154c-2.843 0-4.818-2.255-4.818-5.154m7.453 0c0-1.695-.883-3.222-2.635-3.222c-1.75 0-2.633 1.526-2.633 3.222c0 1.709.854 3.222 2.633 3.222c1.779-.001 2.635-1.513 2.635-3.222m2.767-3.979c0-.7.447-1.093 1.051-1.093c.602 0 1.051.393 1.051 1.093v7.032h2.492c.715 0 1.023.532 1.01 1.008a.98.98 0 0 1-1.01.925h-3.502c-.686 0-1.092-.448-1.092-1.148z"/></g></svg> </template>
CSS
.icon-cool-button {
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%2036%2036%22%3E%3Cpath%20fill%3D%22%233b88c3%22%20d%3D%22M36%2032a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h28a4%204%200%200%201%204%204z%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M5.97%2012.858c1.022%200%203.012.336%203.012%201.569c0%20.504-.35.939-.869.939c-.574%200-.966-.49-2.143-.49c-1.737%200-2.633%201.471-2.633%203.18c0%201.667.911%203.096%202.633%203.096c1.177%200%201.653-.589%202.227-.589c.63%200%20.925.631.925.953c0%201.345-2.115%201.652-3.152%201.652c-2.843%200-4.818-2.255-4.818-5.154c-.001-2.914%201.96-5.156%204.818-5.156%22%2F%3E%3Cpath%20d%3D%22M8.865%2018.014c0-2.914%201.961-5.155%204.818-5.155c2.815%200%204.819%202.311%204.819%205.155c0%202.899-1.947%205.154-4.819%205.154c-2.843%200-4.818-2.255-4.818-5.154m7.452%200c0-1.695-.882-3.222-2.633-3.222s-2.633%201.526-2.633%203.222c0%201.709.855%203.222%202.633%203.222s2.633-1.513%202.633-3.222m2.656%200c0-2.914%201.96-5.155%204.818-5.155c2.816%200%204.818%202.311%204.818%205.155c0%202.899-1.945%205.154-4.818%205.154c-2.843%200-4.818-2.255-4.818-5.154m7.453%200c0-1.695-.883-3.222-2.635-3.222c-1.75%200-2.633%201.526-2.633%203.222c0%201.709.854%203.222%202.633%203.222c1.779-.001%202.635-1.513%202.635-3.222m2.767-3.979c0-.7.447-1.093%201.051-1.093c.602%200%201.051.393%201.051%201.093v7.032h2.492c.715%200%201.023.532%201.01%201.008a.98.98%200%200%201-1.01.925h-3.502c-.686%200-1.092-.448-1.092-1.148z%22%2F%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%2036%2036%22%3E%3Cpath%20fill%3D%22%233b88c3%22%20d%3D%22M36%2032a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h28a4%204%200%200%201%204%204z%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M5.97%2012.858c1.022%200%203.012.336%203.012%201.569c0%20.504-.35.939-.869.939c-.574%200-.966-.49-2.143-.49c-1.737%200-2.633%201.471-2.633%203.18c0%201.667.911%203.096%202.633%203.096c1.177%200%201.653-.589%202.227-.589c.63%200%20.925.631.925.953c0%201.345-2.115%201.652-3.152%201.652c-2.843%200-4.818-2.255-4.818-5.154c-.001-2.914%201.96-5.156%204.818-5.156%22%2F%3E%3Cpath%20d%3D%22M8.865%2018.014c0-2.914%201.961-5.155%204.818-5.155c2.815%200%204.819%202.311%204.819%205.155c0%202.899-1.947%205.154-4.819%205.154c-2.843%200-4.818-2.255-4.818-5.154m7.452%200c0-1.695-.882-3.222-2.633-3.222s-2.633%201.526-2.633%203.222c0%201.709.855%203.222%202.633%203.222s2.633-1.513%202.633-3.222m2.656%200c0-2.914%201.96-5.155%204.818-5.155c2.816%200%204.818%202.311%204.818%205.155c0%202.899-1.945%205.154-4.818%205.154c-2.843%200-4.818-2.255-4.818-5.154m7.453%200c0-1.695-.883-3.222-2.635-3.222c-1.75%200-2.633%201.526-2.633%203.222c0%201.709.854%203.222%202.633%203.222c1.779-.001%202.635-1.513%202.635-3.222m2.767-3.979c0-.7.447-1.093%201.051-1.093c.602%200%201.051.393%201.051%201.093v7.032h2.492c.715%200%201.023.532%201.01%201.008a.98.98%200%200%201-1.01.925h-3.502c-.686%200-1.092-.448-1.092-1.148z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/cool-button.svg?color=%231a73e8&size=48
