Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: ring. Pick another to preview it and update the animated code:

Radix Icons · RxBell

Bell icon

A free bell icon from Radix Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asnotification iconalert iconalarm iconreminder icon
License
MIT license
Project
icons.radix-ui.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/bell.json
components/icons/radix-bell.tsx
import * as React from "react";

/**
 * Bell from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/bell. Sized in em, colored by currentColor.
 */
export function RxBellIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 15 15"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M7.50094 0.150421C8.10865 0.150484 8.60153 0.64329 8.60153 1.25101C8.60146 1.757 8.25905 2.18112 7.79391 2.3096C10.1422 2.46099 11.9999 4.41337 12 6.79984V10.25C12 11.0562 12.0331 11.7074 12.7236 12.0528C12.9308 12.1564 13.0393 12.3888 12.9863 12.6143C12.933 12.84 12.7319 13 12.5 13H8.15915C8.3675 13.1833 8.49997 13.4507 8.49997 13.75C8.49995 14.3023 8.05224 14.75 7.49997 14.75C6.94771 14.75 6.49999 14.3023 6.49997 13.75C6.49997 13.4508 6.63246 13.1833 6.84079 13H2.49997C2.2681 13 2.06691 12.84 2.01364 12.6143C1.96065 12.3888 2.06913 12.1564 2.27634 12.0528C2.96696 11.7074 2.99996 11.0562 2.99997 10.25V6.79984C3.00005 4.41307 4.85835 2.46056 7.207 2.3096C6.74221 2.18089 6.40042 1.75675 6.40036 1.25101C6.40036 0.643252 6.89319 0.150421 7.50094 0.150421ZM7.49997 3.29984C5.56705 3.29986 4.00005 4.86693 3.99997 6.79984V10.25C3.99997 10.6948 4.01284 11.3855 3.69919 12H11.3007C10.9871 11.3855 11 10.6948 11 10.25V6.79984C10.9999 4.86691 9.43291 3.29984 7.49997 3.29984Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxBell } from "react-icons/rx";

export function Example() {
  return <RxBell className="size-5" />;
}
bell.svg
<svg
  fill="none"
  viewBox="0 0 15 15"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M7.50094 0.150421C8.10865 0.150484 8.60153 0.64329 8.60153 1.25101C8.60146 1.757 8.25905 2.18112 7.79391 2.3096C10.1422 2.46099 11.9999 4.41337 12 6.79984V10.25C12 11.0562 12.0331 11.7074 12.7236 12.0528C12.9308 12.1564 13.0393 12.3888 12.9863 12.6143C12.933 12.84 12.7319 13 12.5 13H8.15915C8.3675 13.1833 8.49997 13.4507 8.49997 13.75C8.49995 14.3023 8.05224 14.75 7.49997 14.75C6.94771 14.75 6.49999 14.3023 6.49997 13.75C6.49997 13.4508 6.63246 13.1833 6.84079 13H2.49997C2.2681 13 2.06691 12.84 2.01364 12.6143C1.96065 12.3888 2.06913 12.1564 2.27634 12.0528C2.96696 11.7074 2.99996 11.0562 2.99997 10.25V6.79984C3.00005 4.41307 4.85835 2.46056 7.207 2.3096C6.74221 2.18089 6.40042 1.75675 6.40036 1.25101C6.40036 0.643252 6.89319 0.150421 7.50094 0.150421ZM7.49997 3.29984C5.56705 3.29986 4.00005 4.86693 3.99997 6.79984V10.25C3.99997 10.6948 4.01284 11.3855 3.69919 12H11.3007C10.9871 11.3855 11 10.6948 11 10.25V6.79984C10.9999 4.86691 9.43291 3.29984 7.49997 3.29984Z"
    fill="currentColor"
  />
</svg>
Attribution
"Bell" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: notification, alert, alarm, reminder

Bell icon in other sets