Vela UI Docs
venizia.ai

phone

Phone, 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.

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

Installation

pnpm dlx velaui add @velaui/icon-phone

Usage

// components/icons/phone.tsx
import Phone from "@/components/icons/phone"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Phone({ size = 24, strokeWidth = 1, className, ref, ...props }: PhoneProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M20.6633 18.7705C20.6633 18.7705 19.5047 19.9085 19.2207 20.2422C18.7582 20.7358 18.2132 20.9689 17.4988 20.9689C17.4301 20.9689 17.3568 20.9689 17.2881 20.9643C15.9279 20.8775 14.6639 20.3473 13.7159 19.8948C11.1238 18.6426 8.84771 16.8647 6.95629 14.6115C5.39461 12.7331 4.35044 10.9964 3.65891 9.13168C3.233 7.99366 3.07729 7.10702 3.14598 6.27064C3.19178 5.73591 3.39787 5.29259 3.77798 4.91325L5.33966 3.35477C5.56406 3.14453 5.80221 3.03027 6.03577 3.03027C6.32429 3.03027 6.55786 3.20395 6.70441 3.3502C6.70899 3.35477 6.71357 3.35934 6.71815 3.36391C6.99751 3.62442 7.26313 3.89407 7.54249 4.182C7.68446 4.32825 7.83101 4.4745 7.97756 4.62532L9.22782 5.87303C9.71327 6.35748 9.71327 6.80538 9.22782 7.28983C9.09501 7.42237 8.96678 7.55491 8.83397 7.68288C8.44927 8.07593 8.75147 7.77435 8.35304 8.13083C8.34388 8.13997 8.33472 8.14454 8.33014 8.15368C7.93629 8.54673 8.00956 8.93064 8.092 9.19115C8.09658 9.20486 8.10116 9.21857 8.10573 9.23228C8.43089 10.0184 8.88886 10.7588 9.58498 11.6409L9.58956 11.6454C10.8536 13.1993 12.1862 14.4105 13.6563 15.3383C13.8441 15.4571 14.0364 15.5531 14.2196 15.6445C14.3845 15.7267 14.5402 15.8044 14.673 15.8867C14.6913 15.8958 14.7097 15.9095 14.728 15.9187C14.8837 15.9964 15.0302 16.033 15.1814 16.033C15.5615 16.033 15.7996 15.7953 15.8775 15.7176L16.7752 14.8217C16.9309 14.6664 17.1782 14.479 17.4667 14.479C17.7506 14.479 17.9842 14.6572 18.1262 14.8126C18.1308 14.8172 18.1308 14.8172 18.1353 14.8217L20.6587 17.34C21.1305 17.8062 20.6633 18.7705 20.6633 18.7705Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Phone.displayName = "Phone";

export default Phone;