Vela UI Docs
venizia.ai

phone-off

PhoneOff, 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-phone-off.

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

Installation

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

Usage

// components/icons/phone-off.tsx
import PhoneOff from "@/components/icons/phone-off"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function PhoneOff({ size = 24, strokeWidth = 1, className, ref, ...props }: PhoneOffProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M11.5304 13.8303C12.0236 14.2367 13.1312 15.0068 13.6563 15.3383C13.8441 15.4571 14.0364 15.5531 14.2196 15.6445C14.3845 15.7267 14.5402 15.8044 14.673 15.8867C14.6913 15.8958 14.7097 15.9095 14.728 15.9187C14.8837 15.9964 15.0302 16.033 15.1814 16.033C15.5615 16.033 15.7996 15.7953 15.8775 15.7176L16.7752 14.8217C16.9309 14.6664 17.1782 14.479 17.4667 14.479C17.7506 14.479 17.9842 14.6572 18.1262 14.8126L20.6587 17.34C21.1305 17.8062 20.6633 18.7705 20.6633 18.7705C20.6633 18.7705 19.5047 19.9085 19.2207 20.2422C18.7582 20.7358 18.2132 20.9689 17.4988 20.9689C17.4301 20.9689 17.3568 20.9689 17.2881 20.9643C15.9279 20.8775 14.6639 20.3473 13.7159 19.8948C12.0899 19.1093 10.1943 17.5765 8.83397 16.3897M6.03577 13.4395C4.96989 11.9949 4.20461 10.6031 3.65891 9.13168C3.233 7.99366 3.07729 7.10702 3.14598 6.27064C3.19178 5.73591 3.39787 5.29259 3.77798 4.91325L5.33966 3.35477C5.56406 3.14453 5.80221 3.03027 6.03577 3.03027C6.32429 3.03027 6.55786 3.20395 6.70441 3.3502L6.71815 3.36391C6.99751 3.62442 7.26313 3.89407 7.54249 4.182C7.68446 4.32825 7.83101 4.4745 7.97756 4.62532L9.22782 5.87303C9.71327 6.35748 9.71327 6.80537 9.22782 7.28983C9.09501 7.42237 8.96678 7.55491 8.83397 7.68288C8.44927 8.07593 8.75147 7.77435 8.35304 8.13083C8.34388 8.13997 8.33472 8.14454 8.33014 8.15368C7.93629 8.54673 8.00956 8.93064 8.092 9.19115L8.10573 9.23228C8.31836 9.74632 8.58777 10.2408 8.94343 10.7682M3.13037 20.4303L20.5304 3.03027" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
PhoneOff.displayName = "PhoneOff";

export default PhoneOff;