Skip to content
Cuelark UI

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

VS Code Icons · VscBell

Bell icon

A free bell icon from VS Code 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
CC BY 4.0 license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/bell.json
components/icons/vscode-codicons-bell.tsx
import * as React from "react";

/**
 * Bell from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/bell. Sized in em, colored by currentColor.
 */
export function VscBellIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M13.964 12.315L13 9.90201V6.00101C13 3.24401 10.757 1.00101 8 1.00101C5.243 1.00101 3 3.24301 3 6.00001V9.90101L2.036 12.314C1.974 12.468 1.993 12.642 2.086 12.78C2.179 12.917 2.334 13 2.5 13H5.99999C5.99999 14.108 6.892 15 8 15C9.108 15 10 14.108 10 13H13.5C13.666 13 13.821 12.918 13.914 12.78C14.007 12.643 14.026 12.469 13.964 12.315ZM8 14C7.444 14 7 13.556 7 13H9C9 13.556 8.55599 14 8 14ZM3.238 12L3.964 10.183C3.988 10.124 4 10.061 4 9.99701V5.99901C4 3.79301 5.794 1.99901 8 1.99901C10.206 1.99901 12 3.79301 12 5.99901V9.99701C12 10.061 12.012 10.124 12.036 10.183L12.762 12H3.238Z"
      />
    </svg>
  );
}
With react-icons
import { VscBell } from "react-icons/vsc";

export function Example() {
  return <VscBell className="size-5" />;
}
bell.svg
<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M13.964 12.315L13 9.90201V6.00101C13 3.24401 10.757 1.00101 8 1.00101C5.243 1.00101 3 3.24301 3 6.00001V9.90101L2.036 12.314C1.974 12.468 1.993 12.642 2.086 12.78C2.179 12.917 2.334 13 2.5 13H5.99999C5.99999 14.108 6.892 15 8 15C9.108 15 10 14.108 10 13H13.5C13.666 13 13.821 12.918 13.914 12.78C14.007 12.643 14.026 12.469 13.964 12.315ZM8 14C7.444 14 7 13.556 7 13H9C9 13.556 8.55599 14 8 14ZM3.238 12L3.964 10.183C3.988 10.124 4 10.061 4 9.99701V5.99901C4 3.79301 5.794 1.99901 8 1.99901C10.206 1.99901 12 3.79301 12 5.99901V9.99701C12 10.061 12.012 10.124 12.036 10.183L12.762 12H3.238Z"
  />
</svg>
Attribution
"Bell" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: notification, alert, alarm, reminder

Bell icon in other sets