frog emoji
frog from Twitter Emoji by Twitter · Default · Animals & Nature · CC-BY-4.0 Attribution required.
- Name
- frog
- Set
- Twitter Emoji
- Style
- Default
- Category
- Animals & Nature
- Viewbox
- 36×36
- License
- CC BY 4.0
- Aliases
- frog-face
The same emoji in other sets
More animals & nature icons from Twitter Emoji
Use the frog emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#c6e5b3" d="M36 22c0 7.456-8.059 12-18 12S0 29.456 0 22S8.059 7 18 7s18 7.544 18 15"/><path fill="#77b255" d="M31.755 12.676A5.99 5.99 0 0 0 34 8a6 6 0 0 0-11.851-1.315A11.8 11.8 0 0 0 18 5.927c-1.465 0-2.861.275-4.149.758A6 6 0 0 0 2 8c0 1.891.877 3.576 2.245 4.676C1.6 15.356 0 18.685 0 22c0 7.456 8.059 1 18 1s18 6.456 18-1c0-3.315-1.6-6.644-4.245-9.324"/><circle cx="7.5" cy="7.5" r="3.5" fill="#fff"/><circle cx="7.5" cy="7.5" r="1.5" fill="#292f33"/><circle cx="28.5" cy="7.5" r="3.5" fill="#fff"/><circle cx="28.5" cy="7.5" r="1.5" fill="#292f33"/><circle cx="14" cy="20" r="1" fill="#5c913b"/><circle cx="22" cy="20" r="1" fill="#5c913b"/></svg>
React
import type { SVGProps } from "react";
export function TwemojiFrog(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#c6e5b3" d="M36 22c0 7.456-8.059 12-18 12S0 29.456 0 22S8.059 7 18 7s18 7.544 18 15"/><path fill="#77b255" d="M31.755 12.676A5.99 5.99 0 0 0 34 8a6 6 0 0 0-11.851-1.315A11.8 11.8 0 0 0 18 5.927c-1.465 0-2.861.275-4.149.758A6 6 0 0 0 2 8c0 1.891.877 3.576 2.245 4.676C1.6 15.356 0 18.685 0 22c0 7.456 8.059 1 18 1s18 6.456 18-1c0-3.315-1.6-6.644-4.245-9.324"/><circle cx="7.5" cy="7.5" r="3.5" fill="#fff"/><circle cx="7.5" cy="7.5" r="1.5" fill="#292f33"/><circle cx="28.5" cy="7.5" r="3.5" fill="#fff"/><circle cx="28.5" cy="7.5" r="1.5" fill="#292f33"/><circle cx="14" cy="20" r="1" fill="#5c913b"/><circle cx="22" cy="20" r="1" fill="#5c913b"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#c6e5b3" d="M36 22c0 7.456-8.059 12-18 12S0 29.456 0 22S8.059 7 18 7s18 7.544 18 15"/><path fill="#77b255" d="M31.755 12.676A5.99 5.99 0 0 0 34 8a6 6 0 0 0-11.851-1.315A11.8 11.8 0 0 0 18 5.927c-1.465 0-2.861.275-4.149.758A6 6 0 0 0 2 8c0 1.891.877 3.576 2.245 4.676C1.6 15.356 0 18.685 0 22c0 7.456 8.059 1 18 1s18 6.456 18-1c0-3.315-1.6-6.644-4.245-9.324"/><circle cx="7.5" cy="7.5" r="3.5" fill="#fff"/><circle cx="7.5" cy="7.5" r="1.5" fill="#292f33"/><circle cx="28.5" cy="7.5" r="3.5" fill="#fff"/><circle cx="28.5" cy="7.5" r="1.5" fill="#292f33"/><circle cx="14" cy="20" r="1" fill="#5c913b"/><circle cx="22" cy="20" r="1" fill="#5c913b"/></svg> </template>
CSS
.icon-frog {
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%23c6e5b3%22%20d%3D%22M36%2022c0%207.456-8.059%2012-18%2012S0%2029.456%200%2022S8.059%207%2018%207s18%207.544%2018%2015%22%2F%3E%3Cpath%20fill%3D%22%2377b255%22%20d%3D%22M31.755%2012.676A5.99%205.99%200%200%200%2034%208a6%206%200%200%200-11.851-1.315A11.8%2011.8%200%200%200%2018%205.927c-1.465%200-2.861.275-4.149.758A6%206%200%200%200%202%208c0%201.891.877%203.576%202.245%204.676C1.6%2015.356%200%2018.685%200%2022c0%207.456%208.059%201%2018%201s18%206.456%2018-1c0-3.315-1.6-6.644-4.245-9.324%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%223.5%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221.5%22%20fill%3D%22%23292f33%22%2F%3E%3Ccircle%20cx%3D%2228.5%22%20cy%3D%227.5%22%20r%3D%223.5%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2228.5%22%20cy%3D%227.5%22%20r%3D%221.5%22%20fill%3D%22%23292f33%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2220%22%20r%3D%221%22%20fill%3D%22%235c913b%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2220%22%20r%3D%221%22%20fill%3D%22%235c913b%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%23c6e5b3%22%20d%3D%22M36%2022c0%207.456-8.059%2012-18%2012S0%2029.456%200%2022S8.059%207%2018%207s18%207.544%2018%2015%22%2F%3E%3Cpath%20fill%3D%22%2377b255%22%20d%3D%22M31.755%2012.676A5.99%205.99%200%200%200%2034%208a6%206%200%200%200-11.851-1.315A11.8%2011.8%200%200%200%2018%205.927c-1.465%200-2.861.275-4.149.758A6%206%200%200%200%202%208c0%201.891.877%203.576%202.245%204.676C1.6%2015.356%200%2018.685%200%2022c0%207.456%208.059%201%2018%201s18%206.456%2018-1c0-3.315-1.6-6.644-4.245-9.324%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%223.5%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221.5%22%20fill%3D%22%23292f33%22%2F%3E%3Ccircle%20cx%3D%2228.5%22%20cy%3D%227.5%22%20r%3D%223.5%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2228.5%22%20cy%3D%227.5%22%20r%3D%221.5%22%20fill%3D%22%23292f33%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2220%22%20r%3D%221%22%20fill%3D%22%235c913b%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2220%22%20r%3D%221%22%20fill%3D%22%235c913b%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/frog.svg?color=%231a73e8&size=48
