top hat emoji
top-hat from Emoji One (Colored) by Emoji One · Default · People · CC-BY-4.0 Attribution required.
- Name
- top-hat
- Set
- Emoji One (Colored)
- Style
- Default
- Category
- People
- Viewbox
- 64×64
- License
- CC BY 4.0
The same emoji in other sets
More people icons from Emoji One (Colored)
alienalien-monsterangry-faceangry-face-with-hornsanguished-faceanxious-face-with-sweatastonished-facebabybaby-angelbackhand-index-pointing-downbackhand-index-pointing-leftbackhand-index-pointing-rightbackhand-index-pointing-upbeaming-face-with-smiling-eyesblond-haired-personboybride-with-veilbriefcasebust-in-silhouettebusts-in-silhouettecall-me-handcat-face-with-tears-of-joycat-face-with-wry-smileclapping-hands
Use the top hat emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><g fill="#3e4347"><path d="M61.3 41.8c-3.2-7.5-15.3-1-29.3-1c-14.1 0-26.1-6.5-29.3 1C-1 49 10.5 61.9 32 61.9S65 49 61.3 41.8"/><path d="M32 1.9C18 2 7.9 8.1 9.3 11.5c3.8 12.5 5.2 23.8 4 36.3c12.6 3 24.9 2.8 37.4-.2c-1.2-12.5.2-23.6 4-36.1C56.1 8.1 46.1 2 32 1.9"/></g><path fill="#ed4c5c" d="M13.6 40.5c.2 2.5-1.1 7.3-1.1 7.3c11.6 11.1 27.4 11.1 39 0c0 0-1.1-4.7-1.1-7.3c-11.8 10.7-25 10.7-36.8 0"/><path fill="#656d72" d="M55 10.4c0 4.7-10.3 8.4-23 8.4S9 15 9 10.4c0-4.7 10.3-8.5 23-8.5s23 3.8 23 8.5"/></svg>
React
import type { SVGProps } from "react";
export function EmojioneTopHat(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><g fill="#3e4347"><path d="M61.3 41.8c-3.2-7.5-15.3-1-29.3-1c-14.1 0-26.1-6.5-29.3 1C-1 49 10.5 61.9 32 61.9S65 49 61.3 41.8"/><path d="M32 1.9C18 2 7.9 8.1 9.3 11.5c3.8 12.5 5.2 23.8 4 36.3c12.6 3 24.9 2.8 37.4-.2c-1.2-12.5.2-23.6 4-36.1C56.1 8.1 46.1 2 32 1.9"/></g><path fill="#ed4c5c" d="M13.6 40.5c.2 2.5-1.1 7.3-1.1 7.3c11.6 11.1 27.4 11.1 39 0c0 0-1.1-4.7-1.1-7.3c-11.8 10.7-25 10.7-36.8 0"/><path fill="#656d72" d="M55 10.4c0 4.7-10.3 8.4-23 8.4S9 15 9 10.4c0-4.7 10.3-8.5 23-8.5s23 3.8 23 8.5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><g fill="#3e4347"><path d="M61.3 41.8c-3.2-7.5-15.3-1-29.3-1c-14.1 0-26.1-6.5-29.3 1C-1 49 10.5 61.9 32 61.9S65 49 61.3 41.8"/><path d="M32 1.9C18 2 7.9 8.1 9.3 11.5c3.8 12.5 5.2 23.8 4 36.3c12.6 3 24.9 2.8 37.4-.2c-1.2-12.5.2-23.6 4-36.1C56.1 8.1 46.1 2 32 1.9"/></g><path fill="#ed4c5c" d="M13.6 40.5c.2 2.5-1.1 7.3-1.1 7.3c11.6 11.1 27.4 11.1 39 0c0 0-1.1-4.7-1.1-7.3c-11.8 10.7-25 10.7-36.8 0"/><path fill="#656d72" d="M55 10.4c0 4.7-10.3 8.4-23 8.4S9 15 9 10.4c0-4.7 10.3-8.5 23-8.5s23 3.8 23 8.5"/></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%2064%2064%22%3E%3Cg%20fill%3D%22%233e4347%22%3E%3Cpath%20d%3D%22M61.3%2041.8c-3.2-7.5-15.3-1-29.3-1c-14.1%200-26.1-6.5-29.3%201C-1%2049%2010.5%2061.9%2032%2061.9S65%2049%2061.3%2041.8%22%2F%3E%3Cpath%20d%3D%22M32%201.9C18%202%207.9%208.1%209.3%2011.5c3.8%2012.5%205.2%2023.8%204%2036.3c12.6%203%2024.9%202.8%2037.4-.2c-1.2-12.5.2-23.6%204-36.1C56.1%208.1%2046.1%202%2032%201.9%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23ed4c5c%22%20d%3D%22M13.6%2040.5c.2%202.5-1.1%207.3-1.1%207.3c11.6%2011.1%2027.4%2011.1%2039%200c0%200-1.1-4.7-1.1-7.3c-11.8%2010.7-25%2010.7-36.8%200%22%2F%3E%3Cpath%20fill%3D%22%23656d72%22%20d%3D%22M55%2010.4c0%204.7-10.3%208.4-23%208.4S9%2015%209%2010.4c0-4.7%2010.3-8.5%2023-8.5s23%203.8%2023%208.5%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%2064%2064%22%3E%3Cg%20fill%3D%22%233e4347%22%3E%3Cpath%20d%3D%22M61.3%2041.8c-3.2-7.5-15.3-1-29.3-1c-14.1%200-26.1-6.5-29.3%201C-1%2049%2010.5%2061.9%2032%2061.9S65%2049%2061.3%2041.8%22%2F%3E%3Cpath%20d%3D%22M32%201.9C18%202%207.9%208.1%209.3%2011.5c3.8%2012.5%205.2%2023.8%204%2036.3c12.6%203%2024.9%202.8%2037.4-.2c-1.2-12.5.2-23.6%204-36.1C56.1%208.1%2046.1%202%2032%201.9%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23ed4c5c%22%20d%3D%22M13.6%2040.5c.2%202.5-1.1%207.3-1.1%207.3c11.6%2011.1%2027.4%2011.1%2039%200c0%200-1.1-4.7-1.1-7.3c-11.8%2010.7-25%2010.7-36.8%200%22%2F%3E%3Cpath%20fill%3D%22%23656d72%22%20d%3D%22M55%2010.4c0%204.7-10.3%208.4-23%208.4S9%2015%209%2010.4c0-4.7%2010.3-8.5%2023-8.5s23%203.8%2023%208.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/emojione/top-hat.svg?color=%231a73e8&size=48
