Vela UI Docs
venizia.ai

phone-call-01

PhoneCall01, 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-call-01.

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

Installation

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

Usage

// components/icons/phone-call-01.tsx
import PhoneCall01 from "@/components/icons/phone-call-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function PhoneCall01({ size = 24, strokeWidth = 1, className, ref, ...props }: PhoneCall01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12.8711 6.32632C14.071 6.52742 15.1609 7.09414 16.0311 7.9625C16.9012 8.83087 17.4645 9.91861 17.6706 11.116M13.0543 2.40039C15.1884 2.76145 17.1348 3.77149 18.6828 5.3117C20.2307 6.85647 21.2382 8.79887 21.6 10.9286M19.933 19.4021C19.933 19.4021 18.7743 20.5401 18.4904 20.8737C18.0278 21.3673 17.4828 21.6004 16.7684 21.6004C16.6997 21.6004 16.6264 21.6004 16.5577 21.5958C15.1976 21.509 13.9336 20.9788 12.9856 20.5264C10.3935 19.2741 8.11736 17.4962 6.22594 15.243C4.66427 13.3646 3.6201 11.6279 2.92856 9.76321C2.50265 8.62519 2.34694 7.73854 2.41564 6.90217C2.46143 6.36744 2.66752 5.92412 3.04763 5.54478L4.60931 3.9863C4.83372 3.77606 5.07186 3.6618 5.30542 3.6618C5.59395 3.6618 5.82751 3.83547 5.97406 3.98173C5.97864 3.9863 5.98322 3.99087 5.9878 3.99544C6.26716 4.25595 6.53278 4.5256 6.81214 4.81353C6.95412 4.95978 7.10067 5.10603 7.24722 5.25685L8.49747 6.50455C8.98292 6.98901 8.98292 7.4369 8.49747 7.92136C8.36466 8.0539 8.23643 8.18644 8.10362 8.31441C7.71892 8.70746 8.02112 8.40587 7.62269 8.76236C7.61353 8.7715 7.60437 8.77607 7.59979 8.78521C7.20594 9.17826 7.27921 9.56217 7.36165 9.82268C7.36623 9.83639 7.37081 9.8501 7.37539 9.86381C7.70055 10.6499 8.15852 11.3903 8.85463 12.2724L8.85921 12.277C10.1232 13.8309 11.4559 15.042 12.926 15.9698C13.1137 16.0886 13.3061 16.1846 13.4893 16.276C13.6542 16.3583 13.8099 16.436 13.9427 16.5182C13.961 16.5274 13.9793 16.5411 13.9976 16.5502C14.1533 16.6279 14.2999 16.6645 14.451 16.6645C14.8311 16.6645 15.0693 16.4268 15.1471 16.3491L16.0448 15.4533C16.2005 15.2979 16.4478 15.1105 16.7363 15.1105C17.0203 15.1105 17.2539 15.2887 17.3958 15.4441C17.4004 15.4487 17.4004 15.4487 17.405 15.4533L19.9284 17.9715C20.4001 18.4377 19.933 19.4021 19.933 19.4021Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
PhoneCall01.displayName = "PhoneCall01";

export default PhoneCall01;