bell-01

Bell01, one of the 856 Vela UI icons, in the Communication group: a 24px grid drawn in currentColor, so it takes the colour of the text around it. It installs on its own as @velaui/icon-bell-01.

16px
20px
24px
32px

Installation

pnpm dlx velaui add @velaui/icon-bell-01

npx shadcn@latest add @velaui/icon-bell-01

yarn dlx shadcn@latest add @velaui/icon-bell-01

bunx --bun shadcn@latest add @velaui/icon-bell-01

Usage

// components/icons/bell-01.tsx
import Bell01 from "@/components/icons/bell-01"

<Bell01 className="size-5 text-muted" />

In use

In a button
In a sentence
Due Friday, or whenever the venue confirms.
In an input
As a badge
Scheduled
In an empty state
No events on this day yet.
Browse blocks

Source

import * as React from "react";

export interface Bell01Props extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Bell01({ size = 24, strokeWidth = 0, className, ref, ...props }: Bell01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M4.10557 16.5624L3.69058 16.2835H3.69058L4.10557 16.5624ZM5.26855 12.835L4.76855 12.8296V12.835H5.26855ZM5.29296 10.5814L5.79296 10.5868V10.5814H5.29296ZM19.9006 16.5805L20.3209 16.3097L20.3209 16.3097L19.9006 16.5805ZM18.7814 12.835L18.2814 12.8293V12.835H18.7814ZM18.8058 10.6931L19.3058 10.6988V10.6931H18.8058ZM9.33333 20.5C9.05719 20.5 8.83333 20.7239 8.83333 21C8.83333 21.2761 9.05719 21.5 9.33333 21.5V21V20.5ZM14.6667 21.5C14.9428 21.5 15.1667 21.2761 15.1667 21C15.1667 20.7239 14.9428 20.5 14.6667 20.5V21V21.5ZM4.10557 16.5624L4.52057 16.8413C5.15259 15.9009 5.76855 14.5138 5.76855 12.835H5.26855H4.76855C4.76855 14.2669 4.24213 15.4628 3.69058 16.2835L4.10557 16.5624ZM5.26855 12.835L5.76852 12.8404L5.79293 10.5868L5.29296 10.5814L4.79299 10.576L4.76858 12.8296L5.26855 12.835ZM19.9006 16.5805L20.3209 16.3097C19.7919 15.4887 19.2814 14.2829 19.2814 12.835H18.7814H18.2814C18.2814 14.5191 18.874 15.9104 19.4804 16.8514L19.9006 16.5805ZM18.7814 12.835L19.2814 12.8407L19.3058 10.6988L18.8058 10.6931L18.3059 10.6874L18.2815 12.8293L18.7814 12.835ZM18.8058 10.6931H19.3058C19.3058 6.22751 16.0907 2.5 12 2.5V3V3.5C15.4268 3.5 18.3058 6.6611 18.3058 10.6931H18.8058ZM19.4933 17.625V18.125C19.9986 18.125 20.2965 17.7309 20.413 17.4216C20.5337 17.101 20.5506 16.666 20.3209 16.3097L19.9006 16.5805L19.4804 16.8514C19.486 16.8602 19.4974 16.8846 19.4996 16.9294C19.5019 16.9742 19.494 17.0244 19.4772 17.0692C19.4598 17.1153 19.4402 17.1369 19.4353 17.1413C19.4342 17.1422 19.4557 17.125 19.4933 17.125V17.625ZM5.29296 10.5814H5.79296C5.79296 6.61111 8.62777 3.5 12 3.5V3V2.5C7.96384 2.5 4.79296 6.17751 4.79296 10.5814H5.29296ZM4.50763 17.625V17.125C4.5465 17.125 4.56818 17.143 4.56641 17.1414C4.56068 17.1363 4.54023 17.113 4.52252 17.0645C4.50534 17.0175 4.49775 16.9652 4.50058 16.9192C4.50341 16.873 4.51535 16.8491 4.52057 16.8413L4.10557 16.5624L3.69058 16.2835C3.45048 16.6408 3.4648 17.0833 3.58321 17.4075C3.6971 17.7194 3.99461 18.125 4.50763 18.125V17.625ZM19.4933 17.625V17.125H4.50763V17.625V18.125H19.4933V17.625ZM9.33333 21V21.5H14.6667V21V20.5H9.33333V21Z" fill="currentColor"/>
    </svg>
  );
}
Bell01.displayName = "Bell01";

export default Bell01;