top hat emoji
top-hat from Twitter Emoji by Twitter · Default · Objects · CC-BY-4.0 Attribution required.
- Name
- top-hat
- Set
- Twitter Emoji
- Style
- Default
- Category
- Objects
- Viewbox
- 36×36
- License
- CC BY 4.0
The same emoji in other sets
More objects icons from Twitter Emoji
Use the top hat emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#31373d" d="M30.198 27.385L32 3.816a3 3 0 0 0-.021-.373c.003-.033.021-.075.021-.11C32 1.529 25.731.066 18 .066c-7.732 0-14 1.462-14 3.267c0 .035.017.068.022.102Q4.001 3.599 4 3.8l1.802 23.585C2.298 28.295 0 29.576 0 31c0 2.762 8.611 5 18 5s18-2.238 18-5c0-1.424-2.298-2.705-5.802-3.615"/><path fill="#66757f" d="M17.536 6.595c-4.89 0-8.602-.896-10.852-1.646a1 1 0 1 1 .632-1.898c2.889.963 10.762 2.891 21.421-.016a1 1 0 1 1 .525 1.93c-4.406 1.202-8.347 1.63-11.726 1.63"/><path fill="#744eaa" d="m30.198 27.385l.446-5.829c-7.705 2.157-17.585 2.207-25.316-.377l.393 5.142c.069.304.113.65.113 1.076c0 1.75 1.289 2.828 2.771 3.396c4.458 1.708 13.958 1.646 18.807.149c1.467-.453 2.776-1.733 2.776-3.191c0-.119.015-.241.024-.361z"/></svg>
React
import type { SVGProps } from "react";
export function TwemojiTopHat(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#31373d" d="M30.198 27.385L32 3.816a3 3 0 0 0-.021-.373c.003-.033.021-.075.021-.11C32 1.529 25.731.066 18 .066c-7.732 0-14 1.462-14 3.267c0 .035.017.068.022.102Q4.001 3.599 4 3.8l1.802 23.585C2.298 28.295 0 29.576 0 31c0 2.762 8.611 5 18 5s18-2.238 18-5c0-1.424-2.298-2.705-5.802-3.615"/><path fill="#66757f" d="M17.536 6.595c-4.89 0-8.602-.896-10.852-1.646a1 1 0 1 1 .632-1.898c2.889.963 10.762 2.891 21.421-.016a1 1 0 1 1 .525 1.93c-4.406 1.202-8.347 1.63-11.726 1.63"/><path fill="#744eaa" d="m30.198 27.385l.446-5.829c-7.705 2.157-17.585 2.207-25.316-.377l.393 5.142c.069.304.113.65.113 1.076c0 1.75 1.289 2.828 2.771 3.396c4.458 1.708 13.958 1.646 18.807.149c1.467-.453 2.776-1.733 2.776-3.191c0-.119.015-.241.024-.361z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#31373d" d="M30.198 27.385L32 3.816a3 3 0 0 0-.021-.373c.003-.033.021-.075.021-.11C32 1.529 25.731.066 18 .066c-7.732 0-14 1.462-14 3.267c0 .035.017.068.022.102Q4.001 3.599 4 3.8l1.802 23.585C2.298 28.295 0 29.576 0 31c0 2.762 8.611 5 18 5s18-2.238 18-5c0-1.424-2.298-2.705-5.802-3.615"/><path fill="#66757f" d="M17.536 6.595c-4.89 0-8.602-.896-10.852-1.646a1 1 0 1 1 .632-1.898c2.889.963 10.762 2.891 21.421-.016a1 1 0 1 1 .525 1.93c-4.406 1.202-8.347 1.63-11.726 1.63"/><path fill="#744eaa" d="m30.198 27.385l.446-5.829c-7.705 2.157-17.585 2.207-25.316-.377l.393 5.142c.069.304.113.65.113 1.076c0 1.75 1.289 2.828 2.771 3.396c4.458 1.708 13.958 1.646 18.807.149c1.467-.453 2.776-1.733 2.776-3.191c0-.119.015-.241.024-.361z"/></svg> </template>
CSS
.icon-top-hat {
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%2331373d%22%20d%3D%22M30.198%2027.385L32%203.816a3%203%200%200%200-.021-.373c.003-.033.021-.075.021-.11C32%201.529%2025.731.066%2018%20.066c-7.732%200-14%201.462-14%203.267c0%20.035.017.068.022.102Q4.001%203.599%204%203.8l1.802%2023.585C2.298%2028.295%200%2029.576%200%2031c0%202.762%208.611%205%2018%205s18-2.238%2018-5c0-1.424-2.298-2.705-5.802-3.615%22%2F%3E%3Cpath%20fill%3D%22%2366757f%22%20d%3D%22M17.536%206.595c-4.89%200-8.602-.896-10.852-1.646a1%201%200%201%201%20.632-1.898c2.889.963%2010.762%202.891%2021.421-.016a1%201%200%201%201%20.525%201.93c-4.406%201.202-8.347%201.63-11.726%201.63%22%2F%3E%3Cpath%20fill%3D%22%23744eaa%22%20d%3D%22m30.198%2027.385l.446-5.829c-7.705%202.157-17.585%202.207-25.316-.377l.393%205.142c.069.304.113.65.113%201.076c0%201.75%201.289%202.828%202.771%203.396c4.458%201.708%2013.958%201.646%2018.807.149c1.467-.453%202.776-1.733%202.776-3.191c0-.119.015-.241.024-.361z%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%2036%2036%22%3E%3Cpath%20fill%3D%22%2331373d%22%20d%3D%22M30.198%2027.385L32%203.816a3%203%200%200%200-.021-.373c.003-.033.021-.075.021-.11C32%201.529%2025.731.066%2018%20.066c-7.732%200-14%201.462-14%203.267c0%20.035.017.068.022.102Q4.001%203.599%204%203.8l1.802%2023.585C2.298%2028.295%200%2029.576%200%2031c0%202.762%208.611%205%2018%205s18-2.238%2018-5c0-1.424-2.298-2.705-5.802-3.615%22%2F%3E%3Cpath%20fill%3D%22%2366757f%22%20d%3D%22M17.536%206.595c-4.89%200-8.602-.896-10.852-1.646a1%201%200%201%201%20.632-1.898c2.889.963%2010.762%202.891%2021.421-.016a1%201%200%201%201%20.525%201.93c-4.406%201.202-8.347%201.63-11.726%201.63%22%2F%3E%3Cpath%20fill%3D%22%23744eaa%22%20d%3D%22m30.198%2027.385l.446-5.829c-7.705%202.157-17.585%202.207-25.316-.377l.393%205.142c.069.304.113.65.113%201.076c0%201.75%201.289%202.828%202.771%203.396c4.458%201.708%2013.958%201.646%2018.807.149c1.467-.453%202.776-1.733%202.776-3.191c0-.119.015-.241.024-.361z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/top-hat.svg?color=%231a73e8&size=48
