Vela UI Docs
venizia.ai

user-profile-x

UserProfileX, 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-x.

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

Installation

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

Usage

// components/icons/user-profile-x.tsx
import UserProfileX from "@/components/icons/user-profile-x"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function UserProfileX({ size = 24, strokeWidth = 0, className, ref, ...props }: UserProfileXProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M1.89996 21.5998C1.89993 21.876 2.12376 22.0999 2.39991 22.0999C2.67605 22.0999 2.89993 21.8761 2.89996 21.6L2.39996 21.5999L1.89996 21.5998ZM2.40037 17.9995L2.90037 17.9996L2.40037 17.9995ZM13.2 14.8999C13.4761 14.8999 13.7 14.676 13.7 14.3999C13.7 14.1238 13.4761 13.8999 13.2 13.8999V14.3999V14.8999ZM21.2464 17.7535C21.4417 17.9487 21.7583 17.9487 21.9535 17.7535C22.1488 17.5582 22.1488 17.2416 21.9535 17.0463L21.6 17.3999L21.2464 17.7535ZM18.1351 13.228C17.9399 13.0327 17.6233 13.0327 17.428 13.228C17.2328 13.4232 17.2328 13.7398 17.428 13.9351L17.7816 13.5815L18.1351 13.228ZM17.4281 17.0462C17.2329 17.2415 17.2329 17.5581 17.4281 17.7534C17.6234 17.9486 17.94 17.9486 18.1352 17.7534L17.7817 17.3998L17.4281 17.0462ZM21.9536 13.935C22.1489 13.7397 22.1489 13.4231 21.9536 13.2279C21.7584 13.0326 21.4418 13.0326 21.2465 13.2279L21.6001 13.5814L21.9536 13.935ZM14.4 5.9999H13.9C13.9 7.71198 12.512 9.0999 10.8 9.0999V9.5999V10.0999C13.0643 10.0999 14.9 8.26427 14.9 5.9999H14.4ZM10.8 9.5999V9.0999C9.08788 9.0999 7.69996 7.71198 7.69996 5.9999H7.19996H6.69996C6.69996 8.26427 8.5356 10.0999 10.8 10.0999V9.5999ZM7.19996 5.9999H7.69996C7.69996 4.28782 9.08788 2.8999 10.8 2.8999V2.3999V1.8999C8.5356 1.8999 6.69996 3.73553 6.69996 5.9999H7.19996ZM10.8 2.3999V2.8999C12.512 2.8999 13.9 4.28782 13.9 5.9999H14.4H14.9C14.9 3.73553 13.0643 1.8999 10.8 1.8999V2.3999ZM2.39996 21.5999L2.89996 21.6L2.90037 17.9996L2.40037 17.9995L1.90037 17.9994L1.89996 21.5998L2.39996 21.5999ZM6.00037 14.3999V13.8999C3.73618 13.8999 1.90062 15.7353 1.90037 17.9994L2.40037 17.9995L2.90037 17.9996C2.90056 16.2876 4.28842 14.8999 6.00037 14.8999V14.3999ZM6.00037 14.3999V14.8999H13.2V14.3999V13.8999H6.00037V14.3999ZM21.6 17.3999L21.9535 17.0463L20.0443 15.1372L19.6908 15.4907L19.3372 15.8443L21.2464 17.7535L21.6 17.3999ZM19.6908 15.4907L20.0443 15.1372L18.1351 13.228L17.7816 13.5815L17.428 13.9351L19.3372 15.8443L19.6908 15.4907ZM17.7817 17.3998L18.1352 17.7534L20.0443 15.8443L19.6908 15.4907L19.3372 15.1372L17.4281 17.0462L17.7817 17.3998ZM19.6908 15.4907L20.0443 15.8443L21.9536 13.935L21.6001 13.5814L21.2465 13.2279L19.3372 15.1372L19.6908 15.4907Z" fill="currentColor"/>
    </svg>
  );
}
UserProfileX.displayName = "UserProfileX";

export default UserProfileX;