phone-outgoing-01

PhoneOutgoing01, 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-01.

16px
20px
24px
32px

Installation

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

npx shadcn@latest add @velaui/icon-phone-outgoing-01

yarn dlx shadcn@latest add @velaui/icon-phone-outgoing-01

bunx --bun shadcn@latest add @velaui/icon-phone-outgoing-01

Usage

// components/icons/phone-outgoing-01.tsx
import PhoneOutgoing01 from "@/components/icons/phone-outgoing-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function PhoneOutgoing01({ size = 24, strokeWidth = 1, className, ref, ...props }: PhoneOutgoing01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M21.6 7.57935L21.5975 2.71582L16.0936 2.71582M21.5975 2.71582L15.3445 8.96885M20.4365 19.0225C20.4365 19.0225 19.2446 20.1932 18.9525 20.5364C18.4766 21.0442 17.916 21.284 17.1811 21.284C17.1104 21.284 17.035 21.284 16.9643 21.2793C15.5651 21.1899 14.2648 20.6445 13.2896 20.1791C10.623 18.8908 8.28156 17.0619 6.33582 14.744C4.72929 12.8117 3.65514 11.0251 2.94374 9.10682C2.5056 7.93613 2.34542 7.02402 2.41608 6.16362C2.4632 5.61354 2.6752 5.15748 3.06623 4.76725L4.67276 3.16401C4.90361 2.94773 5.14859 2.83019 5.38887 2.83019C5.68567 2.83019 5.92594 3.00885 6.0767 3.1593C6.08141 3.16401 6.08613 3.16871 6.09084 3.17341C6.37822 3.4414 6.65147 3.71879 6.93886 4.01499C7.0849 4.16545 7.23566 4.3159 7.38642 4.47105L8.67259 5.75459C9.17198 6.25295 9.17198 6.71371 8.67259 7.21208C8.53596 7.34843 8.40405 7.48477 8.26742 7.61642C7.87168 8.02075 8.18256 7.71051 7.77268 8.07723C7.76326 8.08664 7.75384 8.09134 7.74912 8.10074C7.34396 8.50508 7.41934 8.90001 7.50414 9.168C7.50885 9.18211 7.51356 9.19621 7.51828 9.21032C7.85277 10.019 8.32389 10.7807 9.04 11.6881L9.04471 11.6928C10.345 13.2913 11.716 14.5372 13.2283 15.4917C13.4214 15.6139 13.6193 15.7126 13.8078 15.8067C13.9774 15.8913 14.1375 15.9712 14.2742 16.0558C14.293 16.0652 14.3119 16.0793 14.3307 16.0888C14.4909 16.1687 14.6416 16.2063 14.7971 16.2063C15.1881 16.2063 15.4331 15.9618 15.5132 15.8819L16.4367 14.9603C16.5969 14.8005 16.8513 14.6077 17.1481 14.6077C17.4402 14.6077 17.6804 14.7911 17.8265 14.9509C17.8312 14.9556 17.8312 14.9556 17.8359 14.9603L20.4318 17.5509C20.9171 18.0305 20.4365 19.0225 20.4365 19.0225Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
PhoneOutgoing01.displayName = "PhoneOutgoing01";

export default PhoneOutgoing01;