Vela UI Docs
venizia.ai

phone-outgoing-02

PhoneOutgoing02, 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-outgoing-02.

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

Installation

pnpm dlx velaui add @velaui/icon-phone-outgoing-02

Usage

// components/icons/phone-outgoing-02.tsx
import PhoneOutgoing02 from "@/components/icons/phone-outgoing-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function PhoneOutgoing02({ size = 24, strokeWidth = 1, className, ref, ...props }: PhoneOutgoing02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M18.8094 9.66567L22.2467 6.22487L18.3548 2.33301M22.2467 6.22487L13.4035 6.22487M19.7899 19.4057C19.7899 19.4057 18.598 20.5764 18.3059 20.9196C17.83 21.4274 17.2694 21.6672 16.5345 21.6672C16.4638 21.6672 16.3884 21.6672 16.3177 21.6625C14.9185 21.5731 13.6182 21.0277 12.643 20.5623C9.97643 19.274 7.63495 17.4451 5.68922 15.1272C4.08269 13.1949 3.00853 11.4083 2.29713 9.49002C1.85899 8.31932 1.69881 7.40721 1.76948 6.54682C1.81659 5.99673 2.0286 5.54068 2.41963 5.15045L4.02615 3.5472C4.257 3.33093 4.50199 3.21339 4.74226 3.21339C5.03907 3.21339 5.27934 3.39205 5.4301 3.5425C5.43481 3.5472 5.43952 3.5519 5.44423 3.55661C5.73162 3.8246 6.00487 4.10199 6.29225 4.39819C6.4383 4.54864 6.58906 4.69909 6.73982 4.85425L8.02598 6.13778C8.52537 6.63615 8.52537 7.09691 8.02598 7.59528C7.88936 7.73162 7.75744 7.86797 7.62082 7.99961C7.22507 8.40395 7.53595 8.09371 7.12608 8.46043C7.11665 8.46983 7.10723 8.47454 7.10252 8.48394C6.69735 8.88828 6.77273 9.28321 6.85754 9.5512C6.86225 9.56531 6.86696 9.57941 6.87167 9.59352C7.20617 10.4022 7.67729 11.1638 8.39339 12.0713L8.39811 12.076C9.6984 13.6745 11.0694 14.9204 12.5817 15.8748C12.7748 15.9971 12.9727 16.0958 13.1612 16.1899C13.3308 16.2745 13.4909 16.3544 13.6276 16.439C13.6464 16.4484 13.6653 16.4625 13.6841 16.472C13.8443 16.5519 13.995 16.5895 14.1505 16.5895C14.5415 16.5895 14.7865 16.345 14.8666 16.2651L15.7901 15.3435C15.9503 15.1837 16.2047 14.9909 16.5015 14.9909C16.7936 14.9909 17.0338 15.1743 17.1799 15.3341C17.1846 15.3388 17.1846 15.3388 17.1893 15.3435L19.7852 17.9341C20.2704 18.4137 19.7899 19.4057 19.7899 19.4057Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
PhoneOutgoing02.displayName = "PhoneOutgoing02";

export default PhoneOutgoing02;