Bell icon

fxemoji:bell

The Bell icon (fxemoji:bell) 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: Objects

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#A06C33" d="M256.126 506c-111.671 0-202.198-24.188-202.198-54.026s90.527-54.026 202.198-54.026s202.198 24.188 202.198 54.026C458.325 481.812 367.797 506 256.126 506"/><path fill="#FFD469" d="m281.877 308.597l.643 1.606l1.711 4.538a328 328 0 0 1 2.487 7.052a389 389 0 0 1 3 9.147c1.077 3.351 2.158 6.982 3.303 10.822c1.109 3.84 2.274 7.89 3.393 12.079c1.167 4.189 2.234 8.518 3.367 12.917c1.061 4.399 2.188 8.867 3.179 13.336l1.52 6.694l1.416 6.642c.969 4.399 1.777 8.728 2.619 12.917c1.754 8.379 2.669 16.199 2.869 22.902c.1 3.351.046 6.424-.129 9.147a77 77 0 0 1-.759 7.052c-.323 1.955-.652 3.491-.919 4.538a24 24 0 0 1-.463 1.606c-10.085 29.336-42.042 44.942-71.379 34.857c-16.922-5.817-29.368-19.186-34.857-34.857c0 0-.192-.559-.463-1.606c-.267-1.047-.596-2.583-.919-4.538a77 77 0 0 1-.759-7.052a98 98 0 0 1-.129-9.147c.2-6.703 1.116-14.523 2.869-22.902c.842-4.189 1.651-8.518 2.619-12.917l1.416-6.642l1.52-6.694c.99-4.469 2.118-8.937 3.179-13.336c1.133-4.399 2.199-8.728 3.367-12.917c1.119-4.189 2.285-8.239 3.393-12.079c1.145-3.84 2.227-7.471 3.303-10.822a391 391 0 0 1 3-9.147a323 323 0 0 1 2.487-7.052l1.711-4.538l.644-1.606c5.728-14.293 21.958-21.237 36.251-15.51c7.331 2.938 12.764 8.724 15.51 15.51"/><path fill="#FFB636" d="M457.424 455.12c.587-1.465.901-2.948.901-4.449c0-26.063-90.527-47.191-202.198-47.191S53.928 424.608 53.928 450.671c0 1.84.467 3.655 1.346 5.441c-6.395-8.7-7.646-20.611-.95-32.289c28.285-49.326 63.734-133.652 63.734-246.49c0-68.049 49.278-124.579 114.093-135.877V27.403c0-13.242 10.734-23.976 23.976-23.976s23.976 10.734 23.976 23.976v14.048a154 154 0 0 1 19.498 4.623c56.621 17.397 94.521 70.409 94.343 129.642c-.341 113.633 35.301 198.521 63.719 248.085c6.449 11.248 5.539 22.713-.239 31.319"/><path fill="#FFD469" d="m323.754 77.527l1.098.726l1.319.872l.416.276l.815.589l1.769 1.318c2.733 2.039 4.756 3.927 7.228 6.366a80 80 0 0 1 7.135 8.368l1.731 2.398c.594.818 1.09 1.648 1.649 2.498c.536.848 1.117 1.716 1.631 2.593l1.534 2.672a49 49 0 0 1 1.482 2.746l1.436 2.813c.865 1.884 1.815 3.826 2.61 5.777c1.685 3.918 3.113 7.93 4.455 11.995c1.276 4.053 2.471 8.161 3.439 12.234c3.996 16.315 5.655 32.289 6.271 44.424c.147 3.035.235 5.83.274 8.327c.038 2.496.028 4.701.005 6.53a169 169 0 0 1-.122 4.32l-.064 1.552c-.541 13.177-11.661 23.42-24.838 22.88c-12.921-.53-23.022-11.234-22.899-24.074l.007-.641l.012-1.08c.017-.691.009-1.758 0-3.12a183 183 0 0 0-.146-5.031a207 207 0 0 0-.405-6.654a215 215 0 0 0-1.979-16.697c-.498-3.018-1.043-6.125-1.71-9.217c-.656-3.096-1.39-6.199-2.229-9.209c-.806-3.037-1.76-5.939-2.72-8.741c-1.005-2.753-2.031-5.408-3.138-7.768c-.527-1.22-1.121-2.286-1.65-3.398l-.846-1.527a18 18 0 0 0-.834-1.44l-.821-1.345c-.269-.437-.555-.803-.819-1.2c-.522-.818-1.059-1.467-1.554-2.109a28.5 28.5 0 0 0-2.678-2.953c-.733-.662-1.605-1.391-1.47-1.233a.14.14 0 0 1-.034-.066l-.008-.043l-.398-.249l-1.343-.835l-1.118-.695l-.02-.012c-11.961-7.438-15.627-23.164-8.189-35.124s23.164-15.627 35.124-8.189c.166.1.429.27.592.376"/></svg>

How to use the Bell icon

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web component

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

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

HTML image

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

Related icons in Firefox OS Emoji

Bell icon in other icon sets

Bell icon FAQ

Is the Bell 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 Bell icon in React?

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

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

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

Browse all Firefox OS Emoji icons →