Rooster icon

fxemoji:rooster

The Rooster icon (fxemoji:rooster) is a free SVG icon from the Firefox OS Emoji set by Mozilla. It is drawn on a 512 × 512 grid. Firefox OS Emoji icons are released under the Apache 2.0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Firefox OS Emoji
Author: Mozilla
License: Apache-2.0
Size: 512 × 512
Category: Nature

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#FFB636" d="M62.355 179.644c0-7.008 20.209-6.53 45.139-6.53s45.139-.478 45.139 6.53s-29.929 29.699-45.139 29.699s-45.139-22.691-45.139-29.699m178.131 254.865c-.027-.057-.046-.117-.074-.173c-2.704-5.616-9.535-34.46 1.082-53.902c3.387-6.203 1.105-13.978-5.098-17.365c-6.2-3.386-13.978-1.104-17.365 5.098c-10.84 19.851-10.056 43.669-6.822 60.181l-23.809 1.689c-7.05.5-12.359 6.62-11.859 13.67c.425 5.991 4.912 10.716 10.576 11.696a12.7 12.7 0 0 0 .531 4.736c1.703 5.488 6.759 9.01 12.219 9.01c1.256 0 2.533-.187 3.795-.578c31.994-9.925 35.646-18.421 37.021-21.62c1.586-3.689 1.649-7.781.238-11.421q-.197-.522-.435-1.021m83.258 1.178c-.031-.065-.052-.133-.084-.198c-2.704-5.617-9.536-34.462 1.082-53.902c3.388-6.203 1.105-13.978-5.098-17.365s-13.978-1.104-17.365 5.098c-10.84 19.849-10.056 43.667-6.823 60.18l-23.809 1.689c-7.051.5-12.36 6.62-11.859 13.67c.424 5.992 4.911 10.716 10.575 11.696a12.7 12.7 0 0 0 .531 4.736c1.702 5.488 6.759 9.01 12.219 9.01c1.255 0 2.533-.187 3.795-.578c31.993-9.924 35.646-18.421 37.021-21.619c1.587-3.692 1.649-7.787.237-11.427a12 12 0 0 0-.422-.99"/><path fill="#FFD833" d="M152.633 178.068c0 7.046-20.209 9.996-45.139 9.996s-45.139-2.95-45.139-9.996s29.929-28.816 45.139-28.816s45.139 21.771 45.139 28.816"/><path fill="#E7EDF1" d="M423.717 146.797c-3.604-5.825-12.249-4.989-14.913 1.321c-14.864 35.212-49.695 59.931-90.318 59.931c-42.028 0-77.879-26.449-91.815-63.611c-.098-.26-.284-.493-.517-.712c-7.25-26.984-31.871-46.854-61.144-46.854c-34.971 0-63.32 28.349-63.32 63.32a63.02 63.02 0 0 0 12.142 37.271c-7.511 11.56-12.177 25.083-12.177 40.738c0 96.502 78.562 174.655 175.218 173.991c94.628-.65 171.952-77.834 172.767-172.46c.292-34.108-9.237-65.968-25.923-92.935"/><path fill="#FF473E" d="M224.253 71.466c-10.402-11.876-28.462-13.071-40.338-2.669c0 0-.988.865-2.474 2.542q-.291.325-.606.691c-1.866 2.176-5.359 1.469-6.231-1.262a48 48 0 0 0-.29-.878c-.714-2.124-1.286-3.306-1.286-3.306c-4.344-8.923-13.234-15.372-23.845-16.074c-15.753-1.042-29.368 10.883-30.411 26.636c0 0-.087 1.31.048 3.547q.024.438.06.922c.216 2.858-2.757 4.824-5.303 3.507q-.43-.222-.821-.414c-2.007-.997-3.247-1.428-3.247-1.428c-9.381-3.238-20.227-1.512-28.227 5.495c-11.876 10.402-13.071 28.462-2.669 40.338c0 0 .865.988 2.542 2.474c1.669 1.497 4.161 3.479 7.319 5.607a92 92 0 0 0 5.934 3.684v9.829a46 46 0 0 0-.069 2.463c0 .796.028 1.586.069 2.372v53.211c0 28.528-14.423 34.408-14.423 49.104c0 28.418 40.707 28.418 40.707 0c0-24.495-12.673-59.516 18.818-59.516c24.948 0 45.172-20.224 45.172-45.171c0-24.948-20.224-45.172-45.172-45.172c-4.507 0-8.852.679-12.957 1.911c10.66-8.171 23.985-13.037 38.456-13.037c20.463 0 38.643 9.716 50.215 24.778c.138-.155.284-.312.42-.467c3.17-3.604 5.875-7.138 7.995-10.301c2.129-3.157 3.695-5.929 4.681-7.943c.997-2.007 1.428-3.247 1.428-3.247c3.237-9.379 1.512-20.226-5.495-28.226"/><path fill="#2B3B47" d="M154.112 147.405c-.489-5.699-5.207-10.184-11.02-10.184c-5.829 0-10.547 4.485-11.043 10.184h-.134v15.646h.048v.044c0 6.145 4.985 11.13 11.13 11.13c6.144 0 11.13-4.985 11.13-11.13c0-.012-.023-.02-.023-.044h.023v-15.646z"/></svg>

How to use the Rooster icon

React

import { Icon } from "@iconify/react";

<Icon icon="fxemoji:rooster" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fxemoji:rooster" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fxemoji:rooster" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fxemoji--rooster]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fxemoji -->
<div class="i-fxemoji:rooster"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fxemoji:rooster"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/fxemoji/rooster.svg" alt="Rooster icon" width="24" height="24">

Rooster icon in other icon sets

Rooster icon FAQ

Is the Rooster icon free for commercial use?

Yes. Firefox OS Emoji icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.

How do I use the Rooster icon in React?

Install @iconify/react and render <Icon icon="fxemoji:rooster" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Rooster icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fxemoji/rooster.svg" alt="Rooster icon">, or paste the SVG code inline to style it with CSS.

Browse all Firefox OS Emoji icons →