Vela UI Docsvenizia.ai

bell-04

Bell04, 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-04.

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

Installation

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

Usage

// components/icons/bell-04.tsx
import Bell04 from "@/components/icons/bell-04"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Bell04({ size = 24, strokeWidth = 0, className, ref, ...props }: Bell04Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M6.84106 21.6155L6.59106 21.1825V21.1825L6.84106 21.6155ZM5.99341 20.9781L5.49723 20.9164V20.9164L5.99341 20.9781ZM5.32241 17.4128L4.88635 17.6575L4.88939 17.6628L5.32241 17.4128ZM4.30941 15.6078L4.74547 15.3631L4.74243 15.3578L4.30941 15.6078ZM20.2496 13.8741L20.4996 14.3071V14.3071L20.2496 13.8741ZM20.1344 12.833L20.3382 12.3764L20.3382 12.3764L20.1344 12.833ZM17.4131 10.4322L16.9769 10.6767L16.9801 10.6822L17.4131 10.4322ZM16.4514 8.71606L16.8876 8.47161L16.8844 8.46606L16.4514 8.71606ZM6.82927 6.11328L6.57927 5.68026L6.82927 6.11328ZM13.1858 21.5314L13.4358 21.9644L13.1858 21.5314ZM5.99341 20.9781L6.48959 21.0398C6.6238 19.9609 6.53939 18.5207 5.75542 17.1628L5.32241 17.4128L4.88939 17.6628C5.53376 18.7789 5.61331 19.9832 5.49723 20.9164L5.99341 20.9781ZM5.32241 17.4128L5.75843 17.1681L4.74544 15.3631L4.30941 15.6078L3.87339 15.8525L4.88638 17.6575L5.32241 17.4128ZM20.1344 12.833L20.3382 12.3764C19.4926 11.9989 18.4984 11.312 17.8461 10.1822L17.4131 10.4322L16.9801 10.6822C17.7659 12.0434 18.9512 12.8523 19.9306 13.2896L20.1344 12.833ZM17.4131 10.4322L17.8493 10.1878L16.8876 8.47163L16.4514 8.71606L16.0152 8.96048L16.9769 10.6767L17.4131 10.4322ZM16.4514 8.71606L16.8844 8.46606C14.7965 4.84966 10.1835 3.59935 6.57927 5.68026L6.82927 6.11328L7.07927 6.54629C10.2013 4.74376 14.2043 5.82406 16.0184 8.96606L16.4514 8.71606ZM20.2496 13.8741L20.4996 14.3071C20.9134 14.0682 21.0178 13.6185 20.9757 13.2776C20.9337 12.9374 20.7328 12.5526 20.3382 12.3764L20.1344 12.833L19.9306 13.2896C19.9307 13.2896 19.9311 13.2898 19.932 13.2904C19.9328 13.2909 19.9343 13.292 19.9362 13.2937C19.9402 13.2972 19.9462 13.3035 19.9529 13.3138C19.9671 13.3355 19.9791 13.3665 19.9832 13.4001C19.9874 13.4343 19.9818 13.455 19.9797 13.4602C19.9792 13.4616 19.985 13.4495 19.9996 13.4411L20.2496 13.8741ZM4.30941 15.6078L4.74243 15.3578C2.95672 12.2649 4.00602 8.32063 7.07927 6.54629L6.82927 6.11328L6.57927 5.68026C3.02385 7.73299 1.81679 12.2905 3.8764 15.8578L4.30941 15.6078ZM6.84106 21.6155L6.59106 21.1825C6.60638 21.1736 6.62025 21.1749 6.61828 21.1746C6.61188 21.1736 6.58983 21.1675 6.56105 21.1453C6.5327 21.1234 6.51115 21.096 6.49925 21.0717C6.49366 21.0602 6.49122 21.0516 6.49023 21.0463C6.48974 21.0437 6.48961 21.042 6.48957 21.0411C6.48955 21.0406 6.48956 21.0403 6.48957 21.0401C6.48957 21.04 6.48958 21.0399 6.48958 21.0399C6.48958 21.0399 6.48959 21.0398 6.48959 21.0398L5.99341 20.9781L5.49723 20.9164C5.44307 21.3519 5.6768 21.726 5.95004 21.9369C6.22359 22.148 6.67067 22.2912 7.09106 22.0485L6.84106 21.6155ZM20.2496 13.8741L19.9996 13.4411L6.59106 21.1825L6.84106 21.6155L7.09106 22.0485L20.4996 14.3071L20.2496 13.8741ZM14.4993 17.194L14.0663 17.444C14.7692 18.6615 14.3047 20.308 12.9358 21.0984L13.1858 21.5314L13.4358 21.9644C15.2295 20.9288 15.9412 18.6916 14.9323 16.944L14.4993 17.194ZM13.1858 21.5314L12.9358 21.0984C11.5669 21.8887 9.90876 21.4676 9.20587 20.2502L8.77286 20.5002L8.33985 20.7502C9.34878 22.4977 11.6421 23 13.4358 21.9644L13.1858 21.5314ZM7.63603 3.10242L7.20302 3.35242C7.67359 4.16748 7.39433 5.20969 6.57927 5.68026L6.82927 6.11328L7.07927 6.54629C8.37262 5.79957 8.81576 4.14577 8.06904 2.85242L7.63603 3.10242ZM6.82927 6.11328L6.57927 5.68026C5.76421 6.15084 4.722 5.87158 4.25143 5.05652L3.81842 5.30652L3.3854 5.55652C4.13212 6.84987 5.78592 7.293 7.07927 6.54629L6.82927 6.11328ZM3.81842 5.30652L4.25143 5.05652C3.78085 4.24146 4.06011 3.19925 4.87517 2.72867L4.62517 2.29566L4.37517 1.86265C3.08182 2.60937 2.63869 4.26317 3.3854 5.55652L3.81842 5.30652ZM4.62517 2.29566L4.87517 2.72867C5.69023 2.2581 6.73244 2.53736 7.20302 3.35242L7.63603 3.10242L8.06904 2.85242C7.32232 1.55907 5.66852 1.11593 4.37517 1.86265L4.62517 2.29566Z" fill="currentColor"/>
    </svg>
  );
}
Bell04.displayName = "Bell04";

export default Bell04;