Vela UI Docs
venizia.ai

user-profile-square

UserProfileSquare, 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-square.

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

Installation

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

Usage

// components/icons/user-profile-square.tsx
import UserProfileSquare from "@/components/icons/user-profile-square"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function UserProfileSquare({ size = 24, strokeWidth = 1, className, ref, ...props }: UserProfileSquareProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M4.20002 19.8002C4.54438 19.4145 6.85787 17.5975 8.00778 16.7018C8.42658 16.3756 8.9403 16.2002 9.47116 16.2002C10.7548 16.2002 13.2284 16.2002 14.5183 16.2002C15.0553 16.2002 15.5742 16.3831 16.0066 16.7016C17.4914 17.7954 18.8833 18.6105 20.4 19.8002M6.00002 21.5999H18C19.9882 21.5999 21.6 19.9881 21.6 17.9999V5.9999C21.6 4.01168 19.9882 2.3999 18 2.3999H6.00002C4.0118 2.3999 2.40002 4.01168 2.40002 5.9999V17.9999C2.40002 19.9881 4.0118 21.5999 6.00002 21.5999ZM15.4386 9.27194C15.4386 7.44043 13.8924 5.94398 12 5.94398C10.1076 5.94398 8.56147 7.44043 8.56147 9.27194C8.56147 11.1035 10.1076 12.5999 12 12.5999C13.8924 12.5999 15.4386 11.1035 15.4386 9.27194Z" stroke="currentColor"/>
    </svg>
  );
}
UserProfileSquare.displayName = "UserProfileSquare";

export default UserProfileSquare;