Vela UI Docs
venizia.ai

phone-x

PhoneX, 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-x.

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

Installation

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

Usage

// components/icons/phone-x.tsx
import PhoneX from "@/components/icons/phone-x"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function PhoneX({ size = 24, strokeWidth = 1, className, ref, ...props }: PhoneXProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M21.6 8.43066L18.6 5.43066M18.6 5.43066L15.6 2.43066M18.6 5.43066L15.6 8.43066M18.6 5.43066L21.6 2.43066M19.933 19.3708C19.933 19.3708 18.7743 20.5088 18.4904 20.8425C18.0278 21.336 17.4828 21.5691 16.7684 21.5691C16.6997 21.5691 16.6264 21.5691 16.5577 21.5646C15.1976 21.4777 13.9336 20.9476 12.9856 20.4951C10.3935 19.2428 8.11736 17.465 6.22594 15.2118C4.66427 13.3334 3.6201 11.5967 2.92856 9.73196C2.50265 8.59394 2.34694 7.70729 2.41564 6.87092C2.46143 6.33619 2.66752 5.89287 3.04763 5.51353L4.60931 3.95505C4.83372 3.74481 5.07186 3.63055 5.30542 3.63055C5.59395 3.63055 5.82751 3.80422 5.97406 3.95048C5.97864 3.95505 5.98322 3.95962 5.9878 3.96419C6.26716 4.2247 6.53278 4.49435 6.81214 4.78228C6.95412 4.92853 7.10067 5.07478 7.24722 5.2256L8.49747 6.4733C8.98292 6.95776 8.98292 7.40565 8.49747 7.89011C8.36466 8.02265 8.23643 8.15519 8.10362 8.28316C7.71892 8.67621 8.02112 8.37462 7.62269 8.73111C7.61353 8.74025 7.60437 8.74482 7.59979 8.75396C7.20594 9.14701 7.27921 9.53092 7.36165 9.79143C7.36623 9.80514 7.37081 9.81885 7.37539 9.83256C7.70055 10.6187 8.15852 11.3591 8.85463 12.2411L8.85921 12.2457C10.1232 13.7996 11.4559 15.0108 12.926 15.9385C13.1137 16.0574 13.3061 16.1533 13.4893 16.2447C13.6542 16.327 13.8099 16.4047 13.9427 16.487C13.961 16.4961 13.9793 16.5098 13.9976 16.519C14.1533 16.5967 14.2999 16.6332 14.451 16.6332C14.8311 16.6332 15.0693 16.3956 15.1471 16.3179L16.0448 15.422C16.2005 15.2666 16.4478 15.0793 16.7363 15.0793C17.0203 15.0793 17.2539 15.2575 17.3958 15.4129C17.4004 15.4175 17.4004 15.4175 17.405 15.422L19.9284 17.9403C20.4001 18.4065 19.933 19.3708 19.933 19.3708Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
PhoneX.displayName = "PhoneX";

export default PhoneX;