Vela UI Docs
venizia.ai

close-circle-contained

CloseCircleContained, 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-close-circle-contained.

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

Installation

pnpm dlx velaui add @velaui/icon-close-circle-contained

Usage

// components/icons/close-circle-contained.tsx
import CloseCircleContained from "@/components/icons/close-circle-contained"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CloseCircleContained({ size = 24, strokeWidth = 0, className, ref, ...props }: CloseCircleContainedProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M15.5355 9.17157C15.7308 8.97631 15.7308 8.65973 15.5355 8.46447C15.3403 8.2692 15.0237 8.2692 14.8284 8.46447L15.182 8.81802L15.5355 9.17157ZM8.46447 14.8284C8.2692 15.0237 8.2692 15.3403 8.46447 15.5355C8.65973 15.7308 8.97631 15.7308 9.17157 15.5355L8.81802 15.182L8.46447 14.8284ZM14.8284 15.5355C15.0237 15.7308 15.3403 15.7308 15.5355 15.5355C15.7308 15.3403 15.7308 15.0237 15.5355 14.8284L15.182 15.182L14.8284 15.5355ZM9.17157 8.46447C8.97631 8.2692 8.65973 8.2692 8.46447 8.46447C8.2692 8.65973 8.2692 8.97631 8.46447 9.17157L8.81802 8.81802L9.17157 8.46447ZM21 12H20.5C20.5 16.6944 16.6944 20.5 12 20.5V21V21.5C17.2467 21.5 21.5 17.2467 21.5 12H21ZM12 21V20.5C7.30558 20.5 3.5 16.6944 3.5 12H3H2.5C2.5 17.2467 6.75329 21.5 12 21.5V21ZM3 12H3.5C3.5 7.30558 7.30558 3.5 12 3.5V3V2.5C6.75329 2.5 2.5 6.75329 2.5 12H3ZM12 3V3.5C16.6944 3.5 20.5 7.30558 20.5 12H21H21.5C21.5 6.75329 17.2467 2.5 12 2.5V3ZM15.182 8.81802L14.8284 8.46447L11.6464 11.6464L12 12L12.3536 12.3536L15.5355 9.17157L15.182 8.81802ZM12 12L11.6464 11.6464L8.46447 14.8284L8.81802 15.182L9.17157 15.5355L12.3536 12.3536L12 12ZM15.182 15.182L15.5355 14.8284L12.3536 11.6464L12 12L11.6464 12.3536L14.8284 15.5355L15.182 15.182ZM12 12L12.3536 11.6464L9.17157 8.46447L8.81802 8.81802L8.46447 9.17157L11.6464 12.3536L12 12Z" fill="currentColor"/>
    </svg>
  );
}
CloseCircleContained.displayName = "CloseCircleContained";

export default CloseCircleContained;