What is the bell icon used for?

It signifies alerts, notifications, or reminders. It's often used to draw attention to new information or time-sensitive events.

How do I use the bell icon in React?

You can import and use it directly from the Phosphor React library with: `import { Bell } from '@phosphor-icons/react'`. Then render it as ` `.

The Phosphor icon library, including the bell icon, is available under the MIT license.

Phosphor · bell · MIT

The Phosphor bell icon depicts a classic bell shape and is commonly used in user interfaces to represent notifications, alerts, or reminders.

Install

npm i @phosphor-icons/react

Import & render

import { Bell } from '@phosphor-icons/react';

<Bell size={24} />

Phosphor ships this icon in 6 styles — each its own import:

regular

<Bell size={24} />

thin

<Bell size={24} weight="thin" />

light

<Bell size={24} weight="light" />

bold

<Bell size={24} weight="bold" />

fill

<Bell size={24} weight="fill" />

duotone

<Bell size={24} weight="duotone" />

Library: Phosphor (1,512 icons)
License: MIT
viewBox: 0 0 256 256
Category: system
Keywords: alarmnotificationstimestimerclockscheduleeventsringercallssystemobjectsbellnotificationalert

What is the bell icon used for?: It signifies alerts, notifications, or reminders. It's often used to draw attention to new information or time-sensitive events.
How do I use the bell icon in React?: You can import and use it directly from the Phosphor React library with: `import { Bell } from '@phosphor-icons/react'`. Then render it as `<Bell />`.
What is the license for the Phosphor bell icon?: The Phosphor icon library, including the bell icon, is available under the MIT license.

The same idea in other libraries, and near matches in Phosphor.