Vela UI Docs
venizia.ai

alarm-03

Alarm03, one of the 856 Vela UI icons, in the General 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-alarm-03.

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

Installation

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

Usage

// components/icons/alarm-03.tsx
import Alarm03 from "@/components/icons/alarm-03"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Alarm03({ size = 24, strokeWidth = 0, className, ref, ...props }: Alarm03Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M9.35356 12.2468C9.15829 12.0516 8.84171 12.0516 8.64645 12.2468C8.45119 12.4421 8.45119 12.7587 8.64645 12.9539L9 12.6004L9.35356 12.2468ZM10.8 14.4004L10.4465 14.7539C10.6417 14.9492 10.9583 14.9492 11.1536 14.7539L10.8 14.4004ZM15.3536 10.5539C15.5488 10.3587 15.5488 10.0421 15.3536 9.84684C15.1583 9.65157 14.8417 9.65157 14.6465 9.84684L15 10.2004L15.3536 10.5539ZM6.20956 19.2659C6.40482 19.0707 6.40482 18.7541 6.20956 18.5588C6.01429 18.3636 5.69771 18.3636 5.50245 18.5588L5.856 18.9124L6.20956 19.2659ZM2.81445 21.2468C2.61919 21.4421 2.61919 21.7587 2.81445 21.9539C3.00971 22.1492 3.32629 22.1492 3.52156 21.9539L3.168 21.6004L2.81445 21.2468ZM20.4785 21.9539C20.6737 22.1492 20.9903 22.1492 21.1856 21.9539C21.3808 21.7587 21.3808 21.4421 21.1856 21.2468L20.832 21.6004L20.4785 21.9539ZM18.4976 18.5588C18.3023 18.3636 17.9857 18.3636 17.7905 18.5588C17.5952 18.7541 17.5952 19.0707 17.7905 19.2659L18.144 18.9124L18.4976 18.5588ZM5.15356 2.75394C5.34882 2.55868 5.34882 2.2421 5.15356 2.04684C4.9583 1.85158 4.64171 1.85158 4.44645 2.04684L4.8 2.40039L5.15356 2.75394ZM1.44645 5.04684C1.25119 5.2421 1.25119 5.55868 1.44645 5.75394C1.64171 5.94921 1.95829 5.94921 2.15356 5.75394L1.8 5.40039L1.44645 5.04684ZM21.8465 5.75394C22.0417 5.94921 22.3583 5.94921 22.5536 5.75394C22.7488 5.55868 22.7488 5.2421 22.5536 5.04684L22.2 5.40039L21.8465 5.75394ZM19.5536 2.04684C19.3583 1.85158 19.0417 1.85158 18.8465 2.04684C18.6512 2.2421 18.6512 2.55868 18.8465 2.75394L19.2 2.40039L19.5536 2.04684ZM9 12.6004L8.64645 12.9539L10.4465 14.7539L10.8 14.4004L11.1536 14.0468L9.35356 12.2468L9 12.6004ZM10.8 14.4004L11.1536 14.7539L15.3536 10.5539L15 10.2004L14.6465 9.84684L10.4465 14.0468L10.8 14.4004ZM5.856 18.9124L5.50245 18.5588L2.81445 21.2468L3.168 21.6004L3.52156 21.9539L6.20956 19.2659L5.856 18.9124ZM20.832 21.6004L21.1856 21.2468L18.4976 18.5588L18.144 18.9124L17.7905 19.2659L20.4785 21.9539L20.832 21.6004ZM20.448 12.7684H19.948C19.948 17.1579 16.3896 20.7164 12 20.7164V21.2164V21.7164C16.9418 21.7164 20.948 17.7102 20.948 12.7684H20.448ZM12 21.2164V20.7164C7.61044 20.7164 4.052 17.1579 4.052 12.7684H3.552H3.052C3.052 17.7102 7.05816 21.7164 12 21.7164V21.2164ZM3.552 12.7684H4.052C4.052 8.37883 7.61044 4.82039 12 4.82039V4.32039V3.82039C7.05816 3.82039 3.052 7.82654 3.052 12.7684H3.552ZM12 4.32039V4.82039C16.3896 4.82039 19.948 8.37883 19.948 12.7684H20.448H20.948C20.948 7.82654 16.9418 3.82039 12 3.82039V4.32039ZM4.8 2.40039L4.44645 2.04684L1.44645 5.04684L1.8 5.40039L2.15356 5.75394L5.15356 2.75394L4.8 2.40039ZM22.2 5.40039L22.5536 5.04684L19.5536 2.04684L19.2 2.40039L18.8465 2.75394L21.8465 5.75394L22.2 5.40039Z" fill="currentColor"/>
    </svg>
  );
}
Alarm03.displayName = "Alarm03";

export default Alarm03;