yawning face emoji
yawning-face from Fluent Emoji Flat by Microsoft Corporation · Default · Smileys & Emotion · MIT Free for personal and commercial use.
- Name
- yawning-face
- Set
- Fluent Emoji Flat
- Style
- Default
- Category
- Smileys & Emotion
- Viewbox
- 32×32
- License
- MIT
The same emoji in other sets
More smileys & emotion icons from Fluent Emoji Flat
alienalien-monsteranger-symbolangry-faceangry-face-with-hornsanguished-faceanxious-face-with-sweatastonished-facebeaming-face-with-smiling-eyesbeating-heartblack-heartblue-heartbombbroken-heartbrown-heartcat-with-tears-of-joycat-with-wry-smileclown-facecold-facecollisionconfounded-faceconfused-facecowboy-hat-facecrying-cat
Use the yawning face emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#ffb02e" d="M15.999 29.998c9.334 0 13.999-6.268 13.999-14c0-7.73-4.665-13.998-14-13.998C6.665 2 2 8.268 2 15.999s4.664 13.999 13.999 13.999"/><circle cx="16" cy="21" r="6" fill="#bb1d80"/><path fill="#ff822d" fill-rule="evenodd" d="M13.2 17.939a1.25 1.25 0 0 0-1.927-1.573l-3.116 3.116V18.5c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.285 1.249c-.086 1.636-.346 3.822-.965 4.751c-1 1.5-1 4.5 1 6c3.816 2.862 8.334-2.018 8.741-2.473l2.643-2.643A1.25 1.25 0 0 0 16.126 22l.354-.31a1.25 1.25 0 0 0-1.512-1.983l1.073-1.073a1.25 1.25 0 0 0-1.768-1.768z" clip-rule="evenodd"/><path fill="#402a32" fill-rule="evenodd" d="M7.894 12.447c.355-.709 1.11-1.311 2.047-1.623s1.903-.284 2.612.07a1 1 0 1 0 .894-1.789c-1.29-.645-2.825-.617-4.138-.179c-1.314.438-2.558 1.336-3.203 2.627a1 1 0 1 0 1.788.894m16.211 0c-.354-.709-1.11-1.311-2.046-1.623c-.937-.313-1.903-.284-2.612.07a1 1 0 1 1-.894-1.789c1.29-.645 2.825-.617 4.138-.179c1.314.438 2.558 1.336 3.203 2.627a1 1 0 1 1-1.788.894" clip-rule="evenodd"/></g></svg>
React
import type { SVGProps } from "react";
export function FluentEmojiFlatYawningFace(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#ffb02e" d="M15.999 29.998c9.334 0 13.999-6.268 13.999-14c0-7.73-4.665-13.998-14-13.998C6.665 2 2 8.268 2 15.999s4.664 13.999 13.999 13.999"/><circle cx="16" cy="21" r="6" fill="#bb1d80"/><path fill="#ff822d" fillRule="evenodd" d="M13.2 17.939a1.25 1.25 0 0 0-1.927-1.573l-3.116 3.116V18.5c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.285 1.249c-.086 1.636-.346 3.822-.965 4.751c-1 1.5-1 4.5 1 6c3.816 2.862 8.334-2.018 8.741-2.473l2.643-2.643A1.25 1.25 0 0 0 16.126 22l.354-.31a1.25 1.25 0 0 0-1.512-1.983l1.073-1.073a1.25 1.25 0 0 0-1.768-1.768z" clipRule="evenodd"/><path fill="#402a32" fillRule="evenodd" d="M7.894 12.447c.355-.709 1.11-1.311 2.047-1.623s1.903-.284 2.612.07a1 1 0 1 0 .894-1.789c-1.29-.645-2.825-.617-4.138-.179c-1.314.438-2.558 1.336-3.203 2.627a1 1 0 1 0 1.788.894m16.211 0c-.354-.709-1.11-1.311-2.046-1.623c-.937-.313-1.903-.284-2.612.07a1 1 0 1 1-.894-1.789c1.29-.645 2.825-.617 4.138-.179c1.314.438 2.558 1.336 3.203 2.627a1 1 0 1 1-1.788.894" clipRule="evenodd"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#ffb02e" d="M15.999 29.998c9.334 0 13.999-6.268 13.999-14c0-7.73-4.665-13.998-14-13.998C6.665 2 2 8.268 2 15.999s4.664 13.999 13.999 13.999"/><circle cx="16" cy="21" r="6" fill="#bb1d80"/><path fill="#ff822d" fill-rule="evenodd" d="M13.2 17.939a1.25 1.25 0 0 0-1.927-1.573l-3.116 3.116V18.5c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.285 1.249c-.086 1.636-.346 3.822-.965 4.751c-1 1.5-1 4.5 1 6c3.816 2.862 8.334-2.018 8.741-2.473l2.643-2.643A1.25 1.25 0 0 0 16.126 22l.354-.31a1.25 1.25 0 0 0-1.512-1.983l1.073-1.073a1.25 1.25 0 0 0-1.768-1.768z" clip-rule="evenodd"/><path fill="#402a32" fill-rule="evenodd" d="M7.894 12.447c.355-.709 1.11-1.311 2.047-1.623s1.903-.284 2.612.07a1 1 0 1 0 .894-1.789c-1.29-.645-2.825-.617-4.138-.179c-1.314.438-2.558 1.336-3.203 2.627a1 1 0 1 0 1.788.894m16.211 0c-.354-.709-1.11-1.311-2.046-1.623c-.937-.313-1.903-.284-2.612.07a1 1 0 1 1-.894-1.789c1.29-.645 2.825-.617 4.138-.179c1.314.438 2.558 1.336 3.203 2.627a1 1 0 1 1-1.788.894" clip-rule="evenodd"/></g></svg> </template>
CSS
.icon-yawning-face {
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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffb02e%22%20d%3D%22M15.999%2029.998c9.334%200%2013.999-6.268%2013.999-14c0-7.73-4.665-13.998-14-13.998C6.665%202%202%208.268%202%2015.999s4.664%2013.999%2013.999%2013.999%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2221%22%20r%3D%226%22%20fill%3D%22%23bb1d80%22%2F%3E%3Cpath%20fill%3D%22%23ff822d%22%20fill-rule%3D%22evenodd%22%20d%3D%22M13.2%2017.939a1.25%201.25%200%200%200-1.927-1.573l-3.116%203.116V18.5c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.285%201.249c-.086%201.636-.346%203.822-.965%204.751c-1%201.5-1%204.5%201%206c3.816%202.862%208.334-2.018%208.741-2.473l2.643-2.643A1.25%201.25%200%200%200%2016.126%2022l.354-.31a1.25%201.25%200%200%200-1.512-1.983l1.073-1.073a1.25%201.25%200%200%200-1.768-1.768z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23402a32%22%20fill-rule%3D%22evenodd%22%20d%3D%22M7.894%2012.447c.355-.709%201.11-1.311%202.047-1.623s1.903-.284%202.612.07a1%201%200%201%200%20.894-1.789c-1.29-.645-2.825-.617-4.138-.179c-1.314.438-2.558%201.336-3.203%202.627a1%201%200%201%200%201.788.894m16.211%200c-.354-.709-1.11-1.311-2.046-1.623c-.937-.313-1.903-.284-2.612.07a1%201%200%201%201-.894-1.789c1.29-.645%202.825-.617%204.138-.179c1.314.438%202.558%201.336%203.203%202.627a1%201%200%201%201-1.788.894%22%20clip-rule%3D%22evenodd%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffb02e%22%20d%3D%22M15.999%2029.998c9.334%200%2013.999-6.268%2013.999-14c0-7.73-4.665-13.998-14-13.998C6.665%202%202%208.268%202%2015.999s4.664%2013.999%2013.999%2013.999%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2221%22%20r%3D%226%22%20fill%3D%22%23bb1d80%22%2F%3E%3Cpath%20fill%3D%22%23ff822d%22%20fill-rule%3D%22evenodd%22%20d%3D%22M13.2%2017.939a1.25%201.25%200%200%200-1.927-1.573l-3.116%203.116V18.5c0-.69-.56-1.25-1.25-1.25s-1.25.56-1.285%201.249c-.086%201.636-.346%203.822-.965%204.751c-1%201.5-1%204.5%201%206c3.816%202.862%208.334-2.018%208.741-2.473l2.643-2.643A1.25%201.25%200%200%200%2016.126%2022l.354-.31a1.25%201.25%200%200%200-1.512-1.983l1.073-1.073a1.25%201.25%200%200%200-1.768-1.768z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23402a32%22%20fill-rule%3D%22evenodd%22%20d%3D%22M7.894%2012.447c.355-.709%201.11-1.311%202.047-1.623s1.903-.284%202.612.07a1%201%200%201%200%20.894-1.789c-1.29-.645-2.825-.617-4.138-.179c-1.314.438-2.558%201.336-3.203%202.627a1%201%200%201%200%201.788.894m16.211%200c-.354-.709-1.11-1.311-2.046-1.623c-.937-.313-1.903-.284-2.612.07a1%201%200%201%201-.894-1.789c1.29-.645%202.825-.617%204.138-.179c1.314.438%202.558%201.336%203.203%202.627a1%201%200%201%201-1.788.894%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-emoji-flat/yawning-face.svg?color=%231a73e8&size=48
