Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: turn. Pick another to preview it and update the animated code:

VS Code Icons · VscCloseCompact

Close Compact icon

A free close compact icon from VS Code Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asx iconcancel icondismiss icontimes iconremove iconxmark iconcross icon
License
CC BY 4.0 license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/close-compact.json
components/icons/vscode-codicons-close-compact.tsx
import * as React from "react";

/**
 * Close Compact from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/close-compact. Sized in em, colored by currentColor.
 */
export function VscCloseCompactIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 12 12"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M10.1499 1.14013C10.3498 0.940199 10.6598 0.940342 10.8599 1.14013C11.0599 1.34013 11.0599 1.65009 10.8599 1.85009L6.71239 5.99267L10.8599 10.1401C11.0599 10.3401 11.0599 10.6501 10.8599 10.8501C10.7599 10.95 10.6302 11.0004 10.5102 11.0005H10.5005C10.3705 11.0005 10.2399 10.9501 10.1499 10.8501L6.00146 6.70165L1.85009 10.8501C1.7502 10.95 1.62037 11.0004 1.50048 11.0005C1.37048 11.0005 1.23989 10.9501 1.14989 10.8501C0.950107 10.6501 0.949965 10.3401 1.14989 10.1401L5.29442 5.99462L1.14989 1.85009C0.950107 1.65008 0.949964 1.34006 1.14989 1.14013C1.34982 0.940199 1.65985 0.940342 1.85985 1.14013L6.00438 5.28466L10.1499 1.14013Z"
      />
    </svg>
  );
}
With react-icons
import { VscCloseCompact } from "react-icons/vsc";

export function Example() {
  return <VscCloseCompact className="size-5" />;
}
close-compact.svg
<svg
  viewBox="0 0 12 12"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M10.1499 1.14013C10.3498 0.940199 10.6598 0.940342 10.8599 1.14013C11.0599 1.34013 11.0599 1.65009 10.8599 1.85009L6.71239 5.99267L10.8599 10.1401C11.0599 10.3401 11.0599 10.6501 10.8599 10.8501C10.7599 10.95 10.6302 11.0004 10.5102 11.0005H10.5005C10.3705 11.0005 10.2399 10.9501 10.1499 10.8501L6.00146 6.70165L1.85009 10.8501C1.7502 10.95 1.62037 11.0004 1.50048 11.0005C1.37048 11.0005 1.23989 10.9501 1.14989 10.8501C0.950107 10.6501 0.949965 10.3401 1.14989 10.1401L5.29442 5.99462L1.14989 1.85009C0.950107 1.65008 0.949964 1.34006 1.14989 1.14013C1.34982 0.940199 1.65985 0.940342 1.85985 1.14013L6.00438 5.28466L10.1499 1.14013Z"
  />
</svg>
Attribution
"Close Compact" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: x, cancel, dismiss, times