Vela UI Docs
venizia.ai

user-profile-circle

UserProfileCircle, one of the 856 Vela UI icons, in the General 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-user-profile-circle.

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

Installation

pnpm dlx velaui add @velaui/icon-user-profile-circle

Usage

// components/icons/user-profile-circle.tsx
import UserProfileCircle from "@/components/icons/user-profile-circle"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function UserProfileCircle({ size = 24, strokeWidth = 1, className, ref, ...props }: UserProfileCircleProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M5.39999 19.1999C5.86116 18.6834 8.02104 16.3066 8.654 16.3066H15.3464C16.2636 16.3066 18.136 18.2768 18.6 18.9713M21.6 11.9999C21.6 17.3018 17.3019 21.5999 12 21.5999C6.69806 21.5999 2.39999 17.3018 2.39999 11.9999C2.39999 6.69797 6.69806 2.3999 12 2.3999C17.3019 2.3999 21.6 6.69797 21.6 11.9999ZM15.4388 8.72786C15.4388 6.89635 13.8927 5.3999 12.0003 5.3999C10.1079 5.3999 8.56173 6.89635 8.56173 8.72786C8.56173 10.5594 10.1079 12.0558 12.0003 12.0558C13.8927 12.0558 15.4388 10.5594 15.4388 8.72786Z" stroke="currentColor"/>
    </svg>
  );
}
UserProfileCircle.displayName = "UserProfileCircle";

export default UserProfileCircle;