Bell icon
ls:bell
The Bell icon (ls:bell) is a free SVG icon from the Ligature Symbols set by Kazuyuki Motoyama. It is drawn on a 768 × 758 grid. Ligature Symbols icons are released under the Open Font 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
- Ligature Symbols
- Author
- Kazuyuki Motoyama
- License
- OFL-1.1
- Size
- 768 × 758
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="768" height="758" viewBox="0 0 768 758"><path fill="currentColor" d="M282 675H77c-40 0-75-29-77-70c60-45 98-101 123-163c24-62 33-130 38-202c4-49 36-93 80-126c25-18 52-33 80-42c0-3-2-6-2-8c0-36 29-64 65-64s65 28 65 64c0 2-2 6-2 8c28 9 56 24 81 41c44 32 79 76 79 124c4 71 15 142 40 204c25 63 63 120 121 164c-2 41-37 70-77 70H486c-10 48-51 83-101 83s-92-35-103-83m-179-70h562c-45-50-76-107-94-168c-19-60-28-124-32-190c-2-32-27-61-58-83c-30-22-66-34-96-34c-28 0-65 14-97 34c-31 20-57 50-58 80c-3 65-13 130-31 191c-20 62-52 120-96 170m282 121c5 0 7-3 7-8c0-6-2-9-7-9c-32 0-56-25-56-56c0-6-3-9-8-9c-6 0-10 3-10 9c0 40 33 73 74 73"/></svg>
How to use the Bell icon
React
import { Icon } from "@iconify/react";
<Icon icon="ls:bell" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="ls:bell" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="ls:bell" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[ls--bell]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/ls -->
<div class="i-ls:bell"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="ls:bell"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/ls/bell.svg" alt="Bell icon" width="24" height="24">
Bell icon in other icon sets
Bell icon FAQ
Is the Bell icon free for commercial use?
Yes. Ligature Symbols icons are released under the Open Font 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="ls: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/ls/bell.svg" alt="Bell icon">, or paste the SVG code inline to style it with CSS.
Browse all Ligature Symbols icons →
ICONYZ
