Vela UI Docs
venizia.ai

phone-incoming-02

PhoneIncoming02, 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-incoming-02.

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

Installation

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

Usage

// components/icons/phone-incoming-02.tsx
import PhoneIncoming02 from "@/components/icons/phone-incoming-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function PhoneIncoming02({ size = 24, strokeWidth = 1, className, ref, ...props }: PhoneIncoming02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M16.8415 2.55957L13.4042 6.00037L17.2961 9.89223M13.4042 6.00037L22.2474 6.00037M19.7892 19.1796C19.7892 19.1796 18.5972 20.3503 18.3051 20.6935C17.8293 21.2013 17.2687 21.4411 16.5337 21.4411C16.463 21.4411 16.3877 21.441 16.317 21.4363C14.9178 21.347 13.6175 20.8016 12.6422 20.3362C9.9757 19.0479 7.63422 17.219 5.68848 14.9011C4.08196 12.9688 3.0078 11.1822 2.2964 9.26392C1.85826 8.09322 1.69808 7.18111 1.76875 6.32072C1.81586 5.77063 2.02786 5.31458 2.41889 4.92434L4.02542 3.3211C4.25627 3.10483 4.50125 2.98729 4.74153 2.98729C5.03833 2.98729 5.27861 3.16595 5.42936 3.3164C5.43408 3.3211 5.43879 3.3258 5.4435 3.3305C5.73088 3.59849 6.00413 3.87589 6.29152 4.17209C6.43757 4.32254 6.58833 4.47299 6.73908 4.62814L8.02525 5.91168C8.52464 6.41005 8.52464 6.87081 8.02525 7.36917C7.88862 7.50552 7.75671 7.64187 7.62008 7.77351C7.22434 8.17785 7.53522 7.8676 7.12534 8.23433C7.11592 8.24373 7.1065 8.24843 7.10179 8.25784C6.69662 8.66217 6.772 9.05711 6.8568 9.3251C6.86151 9.3392 6.86623 9.35331 6.87094 9.36741C7.20543 10.1761 7.67656 10.9377 8.39266 11.8452L8.39737 11.8499C9.69767 13.4484 11.0686 14.6943 12.5809 15.6487C12.7741 15.771 12.972 15.8697 13.1604 15.9638C13.33 16.0484 13.4902 16.1283 13.6268 16.2129C13.6457 16.2223 13.6645 16.2364 13.6834 16.2458C13.8435 16.3258 13.9943 16.3634 14.1498 16.3634C14.5408 16.3634 14.7858 16.1189 14.8659 16.039L15.7893 15.1174C15.9495 14.9575 16.2039 14.7648 16.5007 14.7648C16.7928 14.7648 17.0331 14.9481 17.1792 15.108C17.1839 15.1127 17.1839 15.1127 17.1886 15.1174L19.7845 17.708C20.2697 18.1875 19.7892 19.1796 19.7892 19.1796Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
PhoneIncoming02.displayName = "PhoneIncoming02";

export default PhoneIncoming02;