Vela UI Docs
venizia.ai

alarm-off

AlarmOff, 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-off.

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

Installation

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

Usage

// components/icons/alarm-off.tsx
import AlarmOff from "@/components/icons/alarm-off"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function AlarmOff({ size = 24, strokeWidth = 1, className, ref, ...props }: AlarmOffProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M2.39999 7.00839V6.24039C2.39999 5.37576 2.68576 4.57787 3.16799 3.93602M16.992 2.40039L17.76 2.40039C19.8808 2.40039 21.6 4.11962 21.6 6.24039V7.00839M5.85599 18.9124L3.16799 21.6004M20.832 21.6004L3.55199 3.49808M9.59999 4.66616C10.3608 4.44116 11.1663 4.32039 12 4.32039C16.6657 4.32039 20.448 8.10269 20.448 12.7684C20.448 14.1053 20.1374 15.3698 19.5845 16.4934M17.76 18.9483C16.251 20.3554 14.226 21.2164 12 21.2164C7.33429 21.2164 3.55199 17.4341 3.55199 12.7684C3.55199 10.5424 4.41296 8.51741 5.82005 7.00839" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
AlarmOff.displayName = "AlarmOff";

export default AlarmOff;