frog face emoji
frog-face from Emoji One (Colored) by Emoji One · Default · Nature · CC-BY-4.0 Attribution required.
- Name
- frog-face
- Set
- Emoji One (Colored)
- Style
- Default
- Category
- Nature
- Viewbox
- 64×64
- License
- CC BY 4.0
- Aliases
- frog
The same emoji in other sets
More nature icons from Emoji One (Colored)
Use the frog face emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#83bf4f" d="M57.1 23.6C45.7 6.8 18.3 6.8 6.9 23.6c-4 5.9-5 12.5-4.9 13.9c.3 4 9.3 20.6 30 20.5c20.6-.1 29.6-16.4 30-20.5c.1-1.4-.9-8-4.9-13.9"/><path fill="#ffdf99" d="M2 37.5c.3 4 6.6 21.6 30 21.5c23.3-.1 29.6-17.4 30-21.5c0 0-12.1 10-29.9 10c-18 0-30.1-10-30.1-10"/><path fill="#3e4347" d="M26.3 32c-1.4 0-4.3 4-4.3 4s2.9-1.3 4.3-1.3s4.3 1.3 4.3 1.3s-2.9-4-4.3-4m11.4 0c-1.4 0-4.3 4-4.3 4s2.9-1.3 4.3-1.3S42 36 42 36s-2.9-4-4.3-4"/><circle cx="50" cy="17" r="12" fill="#83bf4f"/><circle cx="50" cy="17" r="8" fill="#ffe655"/><path fill="#3e4347" d="M54 17.2c0 2.2-1.8 4-4 4s-4-1.8-4-4s1.8-4 4-4s4 1.8 4 4"/><path fill="#83bf4f" d="M26 17c0 6.6-5.4 12-12 12S2 23.6 2 17S7.4 5 14 5s12 5.4 12 12"/><circle cx="14" cy="17" r="8" fill="#ffe655"/><path fill="#3e4347" d="M18 17.2c0 2.2-1.8 4-4 4s-4-1.8-4-4s1.8-4 4-4s4 1.8 4 4"/><g fill="#83bf4f"><ellipse cx="14" cy="11.6" rx="9.7" ry="5.4"/><ellipse cx="50" cy="11.6" rx="9.7" ry="5.4"/></g></svg>
React
import type { SVGProps } from "react";
export function EmojioneFrogFace(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#83bf4f" d="M57.1 23.6C45.7 6.8 18.3 6.8 6.9 23.6c-4 5.9-5 12.5-4.9 13.9c.3 4 9.3 20.6 30 20.5c20.6-.1 29.6-16.4 30-20.5c.1-1.4-.9-8-4.9-13.9"/><path fill="#ffdf99" d="M2 37.5c.3 4 6.6 21.6 30 21.5c23.3-.1 29.6-17.4 30-21.5c0 0-12.1 10-29.9 10c-18 0-30.1-10-30.1-10"/><path fill="#3e4347" d="M26.3 32c-1.4 0-4.3 4-4.3 4s2.9-1.3 4.3-1.3s4.3 1.3 4.3 1.3s-2.9-4-4.3-4m11.4 0c-1.4 0-4.3 4-4.3 4s2.9-1.3 4.3-1.3S42 36 42 36s-2.9-4-4.3-4"/><circle cx="50" cy="17" r="12" fill="#83bf4f"/><circle cx="50" cy="17" r="8" fill="#ffe655"/><path fill="#3e4347" d="M54 17.2c0 2.2-1.8 4-4 4s-4-1.8-4-4s1.8-4 4-4s4 1.8 4 4"/><path fill="#83bf4f" d="M26 17c0 6.6-5.4 12-12 12S2 23.6 2 17S7.4 5 14 5s12 5.4 12 12"/><circle cx="14" cy="17" r="8" fill="#ffe655"/><path fill="#3e4347" d="M18 17.2c0 2.2-1.8 4-4 4s-4-1.8-4-4s1.8-4 4-4s4 1.8 4 4"/><g fill="#83bf4f"><ellipse cx="14" cy="11.6" rx="9.7" ry="5.4"/><ellipse cx="50" cy="11.6" rx="9.7" ry="5.4"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#83bf4f" d="M57.1 23.6C45.7 6.8 18.3 6.8 6.9 23.6c-4 5.9-5 12.5-4.9 13.9c.3 4 9.3 20.6 30 20.5c20.6-.1 29.6-16.4 30-20.5c.1-1.4-.9-8-4.9-13.9"/><path fill="#ffdf99" d="M2 37.5c.3 4 6.6 21.6 30 21.5c23.3-.1 29.6-17.4 30-21.5c0 0-12.1 10-29.9 10c-18 0-30.1-10-30.1-10"/><path fill="#3e4347" d="M26.3 32c-1.4 0-4.3 4-4.3 4s2.9-1.3 4.3-1.3s4.3 1.3 4.3 1.3s-2.9-4-4.3-4m11.4 0c-1.4 0-4.3 4-4.3 4s2.9-1.3 4.3-1.3S42 36 42 36s-2.9-4-4.3-4"/><circle cx="50" cy="17" r="12" fill="#83bf4f"/><circle cx="50" cy="17" r="8" fill="#ffe655"/><path fill="#3e4347" d="M54 17.2c0 2.2-1.8 4-4 4s-4-1.8-4-4s1.8-4 4-4s4 1.8 4 4"/><path fill="#83bf4f" d="M26 17c0 6.6-5.4 12-12 12S2 23.6 2 17S7.4 5 14 5s12 5.4 12 12"/><circle cx="14" cy="17" r="8" fill="#ffe655"/><path fill="#3e4347" d="M18 17.2c0 2.2-1.8 4-4 4s-4-1.8-4-4s1.8-4 4-4s4 1.8 4 4"/><g fill="#83bf4f"><ellipse cx="14" cy="11.6" rx="9.7" ry="5.4"/><ellipse cx="50" cy="11.6" rx="9.7" ry="5.4"/></g></svg> </template>
CSS
.icon-frog-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%2064%2064%22%3E%3Cpath%20fill%3D%22%2383bf4f%22%20d%3D%22M57.1%2023.6C45.7%206.8%2018.3%206.8%206.9%2023.6c-4%205.9-5%2012.5-4.9%2013.9c.3%204%209.3%2020.6%2030%2020.5c20.6-.1%2029.6-16.4%2030-20.5c.1-1.4-.9-8-4.9-13.9%22%2F%3E%3Cpath%20fill%3D%22%23ffdf99%22%20d%3D%22M2%2037.5c.3%204%206.6%2021.6%2030%2021.5c23.3-.1%2029.6-17.4%2030-21.5c0%200-12.1%2010-29.9%2010c-18%200-30.1-10-30.1-10%22%2F%3E%3Cpath%20fill%3D%22%233e4347%22%20d%3D%22M26.3%2032c-1.4%200-4.3%204-4.3%204s2.9-1.3%204.3-1.3s4.3%201.3%204.3%201.3s-2.9-4-4.3-4m11.4%200c-1.4%200-4.3%204-4.3%204s2.9-1.3%204.3-1.3S42%2036%2042%2036s-2.9-4-4.3-4%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2217%22%20r%3D%2212%22%20fill%3D%22%2383bf4f%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2217%22%20r%3D%228%22%20fill%3D%22%23ffe655%22%2F%3E%3Cpath%20fill%3D%22%233e4347%22%20d%3D%22M54%2017.2c0%202.2-1.8%204-4%204s-4-1.8-4-4s1.8-4%204-4s4%201.8%204%204%22%2F%3E%3Cpath%20fill%3D%22%2383bf4f%22%20d%3D%22M26%2017c0%206.6-5.4%2012-12%2012S2%2023.6%202%2017S7.4%205%2014%205s12%205.4%2012%2012%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2217%22%20r%3D%228%22%20fill%3D%22%23ffe655%22%2F%3E%3Cpath%20fill%3D%22%233e4347%22%20d%3D%22M18%2017.2c0%202.2-1.8%204-4%204s-4-1.8-4-4s1.8-4%204-4s4%201.8%204%204%22%2F%3E%3Cg%20fill%3D%22%2383bf4f%22%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2211.6%22%20rx%3D%229.7%22%20ry%3D%225.4%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2211.6%22%20rx%3D%229.7%22%20ry%3D%225.4%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%2064%2064%22%3E%3Cpath%20fill%3D%22%2383bf4f%22%20d%3D%22M57.1%2023.6C45.7%206.8%2018.3%206.8%206.9%2023.6c-4%205.9-5%2012.5-4.9%2013.9c.3%204%209.3%2020.6%2030%2020.5c20.6-.1%2029.6-16.4%2030-20.5c.1-1.4-.9-8-4.9-13.9%22%2F%3E%3Cpath%20fill%3D%22%23ffdf99%22%20d%3D%22M2%2037.5c.3%204%206.6%2021.6%2030%2021.5c23.3-.1%2029.6-17.4%2030-21.5c0%200-12.1%2010-29.9%2010c-18%200-30.1-10-30.1-10%22%2F%3E%3Cpath%20fill%3D%22%233e4347%22%20d%3D%22M26.3%2032c-1.4%200-4.3%204-4.3%204s2.9-1.3%204.3-1.3s4.3%201.3%204.3%201.3s-2.9-4-4.3-4m11.4%200c-1.4%200-4.3%204-4.3%204s2.9-1.3%204.3-1.3S42%2036%2042%2036s-2.9-4-4.3-4%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2217%22%20r%3D%2212%22%20fill%3D%22%2383bf4f%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2217%22%20r%3D%228%22%20fill%3D%22%23ffe655%22%2F%3E%3Cpath%20fill%3D%22%233e4347%22%20d%3D%22M54%2017.2c0%202.2-1.8%204-4%204s-4-1.8-4-4s1.8-4%204-4s4%201.8%204%204%22%2F%3E%3Cpath%20fill%3D%22%2383bf4f%22%20d%3D%22M26%2017c0%206.6-5.4%2012-12%2012S2%2023.6%202%2017S7.4%205%2014%205s12%205.4%2012%2012%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2217%22%20r%3D%228%22%20fill%3D%22%23ffe655%22%2F%3E%3Cpath%20fill%3D%22%233e4347%22%20d%3D%22M18%2017.2c0%202.2-1.8%204-4%204s-4-1.8-4-4s1.8-4%204-4s4%201.8%204%204%22%2F%3E%3Cg%20fill%3D%22%2383bf4f%22%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2211.6%22%20rx%3D%229.7%22%20ry%3D%225.4%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2211.6%22%20rx%3D%229.7%22%20ry%3D%225.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/emojione/frog-face.svg?color=%231a73e8&size=48
