Vela UI Docs
venizia.ai

bell-03

Bell03, 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-03.

  • 16px
  • 20px
  • 24px
  • 32px

Installation

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

Usage

// components/icons/bell-03.tsx
import Bell03 from "@/components/icons/bell-03"

<Bell03 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 Bell03Props extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Bell03({ size = 24, strokeWidth = 0, className, ref, ...props }: Bell03Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M4.10557 18.1074L3.70867 17.8033L3.70867 17.8033L4.10557 18.1074ZM5.26855 14.8377L4.76855 14.8316V14.8377H5.26855ZM5.29296 12.8609L5.79296 12.8671V12.8609H5.29296ZM19.9006 18.1233L20.3036 17.8272L20.3036 17.8272L19.9006 18.1233ZM18.7814 14.8377L18.2814 14.8312V14.8377H18.7814ZM18.8058 12.9588L19.3058 12.9653V12.9588H18.8058ZM4.10557 18.1074L4.50248 18.4115C5.13895 17.5807 5.76855 16.3436 5.76855 14.8377H5.26855H4.76855C4.76855 16.0605 4.25577 17.0892 3.70867 17.8033L4.10557 18.1074ZM5.26855 14.8377L5.76851 14.8439L5.79292 12.8671L5.29296 12.8609L4.793 12.8547L4.76859 14.8316L5.26855 14.8377ZM19.9006 18.1233L20.3036 17.8272C19.7793 17.1136 19.2814 16.076 19.2814 14.8377H18.7814H18.2814C18.2814 16.3468 18.8865 17.5874 19.4977 18.4193L19.9006 18.1233ZM18.7814 14.8377L19.2814 14.8442L19.3058 12.9653L18.8058 12.9588L18.3059 12.9523L18.2815 14.8312L18.7814 14.8377ZM18.8058 12.9588H19.3058C19.3058 8.95171 16.0309 5.71053 12 5.71053V6.21053V6.71053C15.4866 6.71053 18.3058 9.51198 18.3058 12.9588H18.8058ZM19.4933 19.0394V19.5394C19.9605 19.5394 20.2715 19.2136 20.4045 18.9037C20.5369 18.5955 20.5555 18.1702 20.3036 17.8272L19.9006 18.1233L19.4977 18.4193C19.4941 18.4144 19.4987 18.4171 19.4998 18.4359C19.501 18.456 19.4969 18.4829 19.4856 18.5093C19.4742 18.5359 19.4617 18.5473 19.46 18.5487C19.4599 18.5488 19.4632 18.5462 19.4704 18.5436C19.4779 18.5408 19.4862 18.5394 19.4933 18.5394V19.0394ZM5.29296 12.8609H5.79296C5.79296 9.46813 8.56794 6.71053 12 6.71053V6.21053V5.71053C8.02367 5.71053 4.79296 8.90786 4.79296 12.8609H5.29296ZM4.50763 19.0394V18.5394C4.5151 18.5394 4.5237 18.5409 4.53151 18.5438C4.53886 18.5465 4.54217 18.5492 4.54178 18.5489C4.53956 18.5471 4.52631 18.5346 4.51445 18.5061C4.50275 18.478 4.49882 18.4494 4.5003 18.4283C4.50168 18.4086 4.50664 18.4061 4.50248 18.4115L4.10557 18.1074L3.70867 17.8033C3.44586 18.1464 3.46145 18.5786 3.59127 18.8904C3.72165 19.2036 4.03305 19.5394 4.50763 19.5394V19.0394ZM19.4933 19.0394V18.5394H4.50763V19.0394V19.5394H19.4933V19.0394ZM15.2 19.0395H14.7C14.7 20.3625 13.5285 21.5 12 21.5V22V22.5C14.0061 22.5 15.7 20.9866 15.7 19.0395H15.2ZM12 22V21.5C10.4715 21.5 9.3 20.3625 9.3 19.0395H8.8H8.3C8.3 20.9866 9.99388 22.5 12 22.5V22ZM14.1333 4.10526H13.6333C13.6333 4.9856 12.9083 5.71053 12 5.71053V6.21053V6.71053C13.4481 6.71053 14.6333 5.55033 14.6333 4.10526H14.1333ZM12 6.21053V5.71053C11.0917 5.71053 10.3667 4.9856 10.3667 4.10526H9.86667H9.36667C9.36667 5.55033 10.5519 6.71053 12 6.71053V6.21053ZM9.86667 4.10526H10.3667C10.3667 3.22492 11.0917 2.5 12 2.5V2V1.5C10.5519 1.5 9.36667 2.66019 9.36667 4.10526H9.86667ZM12 2V2.5C12.9083 2.5 13.6333 3.22492 13.6333 4.10526H14.1333H14.6333C14.6333 2.66019 13.4481 1.5 12 1.5V2Z" fill="currentColor"/>
    </svg>
  );
}
Bell03.displayName = "Bell03";

export default Bell03;