Grinning Cat Face icon
emojione-v1:grinning-cat-face
The Grinning Cat Face icon (emojione-v1:grinning-cat-face) is a free SVG icon from the Emoji One (v1) set by Emoji One. It is drawn on a 64 × 64 grid. Emoji One (v1) icons are released under the CC BY-SA 4.0 license, which allows use in personal and commercial projects as long as you credit the author and share changes to the icons under the same license. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Emoji One (v1)
- Author
- Emoji One
- License
- CC-BY-SA-4.0
- Size
- 64 × 64
- Category
- People
- Tags
- grinningcat, catface, grinningcatface, smiling cat face with open mouth
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path fill="#7094a6" d="M50.04 10.595c-.985 4.135 9.02 12.771 11.932 13.466c2.908.693 1.555-8.157 1.421-13.12c-.136-5.104-.014-10.268-2.921-10.965c-2.912-.69-9.446 6.485-10.432 10.621"/><path fill="#eda75a" d="M50.53 13.825c-.862 3.591 7.828 11.09 10.356 11.693c2.525.599 1.354-7.086 1.236-11.392c-.122-4.434-.014-8.918-2.545-9.522c-2.523-.607-8.193 5.631-9.05 9.221"/><path fill="#7094a6" d="M14.405 10.595c.986 4.135-9.02 12.771-11.933 13.466c-2.913.693-1.559-8.157-1.425-13.12C1.188 5.837 1.064.673 3.975-.023c2.906-.691 9.442 6.484 10.43 10.62"/><path fill="#eda75a" d="M14.12 13.825c.854 3.591-7.831 11.09-10.359 11.693c-2.526.599-1.354-7.086-1.24-11.392c.126-4.434.014-8.918 2.542-9.522c2.528-.607 8.197 5.631 9.06 9.221"/><path fill="#87b1c1" d="M63.822 31.354c0 17.546-14.22 31.766-31.77 31.766C14.5 63.12.286 48.9.286 31.354C.286 13.802 14.5 1.592 32.052 1.592c17.551 0 31.77 12.211 31.77 29.762"/><path fill="#fff" d="M27.474 27.879c0 5.338-2.887 9.672-6.457 9.672c-3.565 0-6.462-4.334-6.462-9.672c0-5.343 2.897-9.67 6.462-9.67c3.569 0 6.457 4.328 6.457 9.67m21.846 0c0 5.338-2.89 9.672-6.459 9.672c-3.563 0-6.459-4.334-6.459-9.672c0-5.343 2.896-9.67 6.459-9.67c3.57 0 6.459 4.328 6.459 9.67"/><path fill="#25333a" d="M25.19 27.879c0 2.798-1.87 5.061-4.176 5.061c-2.312 0-4.176-2.263-4.176-5.061s1.864-5.065 4.176-5.065c2.306 0 4.176 2.267 4.176 5.065m21.85 0c0 2.798-1.863 5.061-4.178 5.061c-2.307 0-4.174-2.263-4.174-5.061s1.867-5.065 4.174-5.065c2.315 0 4.178 2.267 4.178 5.065"/><path fill="#394c54" d="M26.633 34.499c0-2.574 2.196-2.531 5.187-2.531c2.993 0 5.654-.043 5.654 2.531c0 2.582-2.431 4.674-5.422 4.674s-5.419-2.092-5.419-4.674"/><path fill="#fff" d="M22.24 25.534c0 1.505-.547 2.723-1.22 2.723c-.679 0-1.228-1.218-1.228-2.723c0-1.503.549-2.72 1.228-2.72c.673 0 1.22 1.216 1.22 2.72m21.85 0c0 1.505-.549 2.723-1.229 2.723c-.673 0-1.224-1.218-1.224-2.723c0-1.503.551-2.72 1.224-2.72c.68 0 1.229 1.216 1.229 2.72"/><path fill="#394c54" d="M56.797 40.822c0 11.02-11.1 19.972-24.784 19.972c-13.669 0-24.773-8.946-24.773-19.972"/><path fill="#fff" d="M53.55 42.19c0 4.526-9.666 8.19-21.58 8.19c-11.91 0-21.574-3.664-21.574-8.19"/><path fill="#394c54" d="M45.4 45.21c0 4.896-6.25 8.868-13.959 8.868c-7.703 0-13.96-3.972-13.96-8.868"/><path fill="#5e7d89" d="M24 37.876c-.043.758-.564 1.344-1.167 1.311l-16.985-.96c-.6-.035-1.055-.677-1.01-1.435c.043-.758.567-1.345 1.167-1.311l16.985.96c.602.034 1.054.677 1.01 1.435m-.665 3.184c.124.714-.179 1.363-.675 1.45L8.62 44.941c-.496.087-1-.421-1.124-1.137c-.124-.713.179-1.362.675-1.448l14.03-2.433c.496-.086 1 .422 1.124 1.137M40.1 37.573c.043.758.564 1.344 1.167 1.311l16.984-.961c.601-.035 1.055-.677 1.012-1.435c-.043-.757-.566-1.344-1.167-1.311l-16.984.961c-.602.034-1.055.677-1.012 1.435m.674 3.182c-.124.715.179 1.364.675 1.45l14.03 2.433c.496.087 1-.421 1.124-1.138c.124-.712-.18-1.361-.676-1.448l-14.03-2.432c-.496-.087-1 .421-1.124 1.135"/></svg>How to use the Grinning Cat Face icon
React
import { Icon } from "@iconify/react";
<Icon icon="emojione-v1:grinning-cat-face" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="emojione-v1:grinning-cat-face" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="emojione-v1:grinning-cat-face" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[emojione-v1--grinning-cat-face]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/emojione-v1 -->
<div class="i-emojione-v1:grinning-cat-face"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="emojione-v1:grinning-cat-face"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/emojione-v1/grinning-cat-face.svg" alt="Grinning Cat Face icon" width="24" height="24">Related icons in Emoji One (v1)
Grinning Cat Face icon in other icon sets
Grinning Cat Face icon FAQ
Is the Grinning Cat Face icon free for commercial use?
Yes. Emoji One (v1) icons are released under the CC BY-SA 4.0 license, which allows use in personal and commercial projects as long as you credit the author and share changes to the icons under the same license.
How do I use the Grinning Cat Face icon in React?
Install @iconify/react and render <Icon icon="emojione-v1:grinning-cat-face" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Grinning Cat Face icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/emojione-v1/grinning-cat-face.svg" alt="Grinning Cat Face icon">, or paste the SVG code inline to style it with CSS.