Vela UI Docs
venizia.ai

phone-incoming-01

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

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

Installation

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

Usage

// components/icons/phone-incoming-01.tsx
import PhoneIncoming01 from "@/components/icons/phone-incoming-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function PhoneIncoming01({ size = 24, strokeWidth = 1, className, ref, ...props }: PhoneIncoming01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M15.3446 4.10532L15.3471 8.96885L20.851 8.96885M15.3471 8.96885L21.6001 2.71582M20.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.19 14.2648 20.6446 13.2896 20.1791C10.623 18.8909 8.28156 17.062 6.33582 14.7441C4.72929 12.8117 3.65514 11.0251 2.94374 9.10686C2.5056 7.93616 2.34542 7.02405 2.41608 6.16366C2.4632 5.61357 2.6752 5.15752 3.06623 4.76729L4.67276 3.16404C4.90361 2.94777 5.14859 2.83023 5.38887 2.83023C5.68567 2.83023 5.92595 3.00889 6.0767 3.15934C6.08142 3.16404 6.08613 3.16874 6.09084 3.17345C6.37822 3.44144 6.65147 3.71883 6.93886 4.01503C7.08491 4.16548 7.23567 4.31593 7.38642 4.47109L8.67259 5.75462C9.17198 6.25299 9.17198 6.71375 8.67259 7.21212C8.53596 7.34846 8.40405 7.48481 8.26742 7.61645C7.87168 8.02079 8.18256 7.71055 7.77268 8.07727C7.76326 8.08667 7.75384 8.09138 7.74913 8.10078C7.34396 8.50512 7.41934 8.90005 7.50414 9.16804C7.50885 9.18215 7.51357 9.19625 7.51828 9.21036C7.85277 10.019 8.3239 10.7807 9.04 11.6881L9.04471 11.6928C10.345 13.2913 11.716 14.5373 13.2283 15.4917C13.4214 15.6139 13.6193 15.7127 13.8078 15.8067C13.9774 15.8913 14.1375 15.9712 14.2742 16.0559C14.293 16.0653 14.3119 16.0794 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>
  );
}
PhoneIncoming01.displayName = "PhoneIncoming01";

export default PhoneIncoming01;