Skip to content
Cuelark UI

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

VS Code Icons · VscDebugConsole

Debug Console icon

A free debug console 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.

License
CC BY 4.0 license
Project
github.com
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/debug-console.json
components/icons/vscode-codicons-debug-console.tsx
import * as React from "react";

/**
 * Debug Console from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/debug-console. Sized in em, colored by currentColor.
 */
export function VscDebugConsoleIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M5.25 21H11.8185L11.16 21.6585C10.9155 21.903 10.7565 22.194 10.647 22.5H5.25C3.1815 22.5 1.5 20.8185 1.5 18.75V5.25C1.5 3.183 3.1815 1.5 5.25 1.5H18.75C20.8185 1.5 22.5 3.183 22.5 5.25V12.135C22.236 12.228 21.9885 12.3645 21.774 12.552C21.558 12.2205 21.294 11.925 21 11.661V5.25C21 4.0095 19.9905 3 18.75 3H5.25C4.0095 3 3 4.0095 3 5.25V18.75C3 19.9905 4.0095 21 5.25 21ZM4.719 17.781C4.866 17.9265 5.058 18 5.25 18C5.442 18 5.634 17.928 5.781 17.781L10.2795 13.2825C10.572 12.99 10.572 12.5145 10.2795 12.222L5.7795 7.722C5.487 7.4295 5.0115 7.4295 4.719 7.722C4.4265 8.0145 4.4265 8.49 4.719 8.7825L8.688 12.7515L4.719 16.7205C4.4265 17.013 4.4265 17.4885 4.719 17.781ZM22.5 19.5C22.5 20.076 22.3905 20.625 22.1925 21.132L23.781 22.7205C24.0735 23.013 24.0735 23.4885 23.781 23.781C23.634 23.928 23.442 24 23.25 24C23.058 24 22.866 23.9265 22.719 23.781L21.3915 22.4535C20.5665 23.4 19.3515 24.0015 18 24.0015C16.6485 24.0015 15.4335 23.4015 14.6085 22.4535L13.281 23.781C13.134 23.928 12.942 24 12.75 24C12.558 24 12.366 23.9265 12.219 23.781C11.9265 23.4885 11.9265 23.013 12.219 22.7205L13.8075 21.132C13.6095 20.625 13.5 20.076 13.5 19.5H12.75C12.336 19.5 12 19.164 12 18.75C12 18.336 12.336 18 12.75 18H13.5V16.0605L12.219 14.7795C11.9265 14.487 11.9265 14.0115 12.219 13.719C12.5115 13.4265 12.987 13.4265 13.2795 13.719L14.5605 15H15C15 13.3455 16.3455 12 18 12C19.6545 12 21 13.3455 21 15H21.4395L22.7205 13.719C23.013 13.4265 23.4885 13.4265 23.781 13.719C24.0735 14.0115 24.0735 14.487 23.781 14.7795L22.5 16.0605V18H23.25C23.664 18 24 18.336 24 18.75C24 19.164 23.664 19.5 23.25 19.5H22.5ZM16.5 15H19.5C19.5 14.172 18.828 13.5 18 13.5C17.172 13.5 16.5 14.172 16.5 15ZM21 16.5H15V19.5C15 21.1545 16.3455 22.5 18 22.5C19.6545 22.5 21 21.1545 21 19.5V16.5Z"
      />
    </svg>
  );
}
With react-icons
import { VscDebugConsole } from "react-icons/vsc";

export function Example() {
  return <VscDebugConsole className="size-5" />;
}
debug-console.svg
<svg
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M5.25 21H11.8185L11.16 21.6585C10.9155 21.903 10.7565 22.194 10.647 22.5H5.25C3.1815 22.5 1.5 20.8185 1.5 18.75V5.25C1.5 3.183 3.1815 1.5 5.25 1.5H18.75C20.8185 1.5 22.5 3.183 22.5 5.25V12.135C22.236 12.228 21.9885 12.3645 21.774 12.552C21.558 12.2205 21.294 11.925 21 11.661V5.25C21 4.0095 19.9905 3 18.75 3H5.25C4.0095 3 3 4.0095 3 5.25V18.75C3 19.9905 4.0095 21 5.25 21ZM4.719 17.781C4.866 17.9265 5.058 18 5.25 18C5.442 18 5.634 17.928 5.781 17.781L10.2795 13.2825C10.572 12.99 10.572 12.5145 10.2795 12.222L5.7795 7.722C5.487 7.4295 5.0115 7.4295 4.719 7.722C4.4265 8.0145 4.4265 8.49 4.719 8.7825L8.688 12.7515L4.719 16.7205C4.4265 17.013 4.4265 17.4885 4.719 17.781ZM22.5 19.5C22.5 20.076 22.3905 20.625 22.1925 21.132L23.781 22.7205C24.0735 23.013 24.0735 23.4885 23.781 23.781C23.634 23.928 23.442 24 23.25 24C23.058 24 22.866 23.9265 22.719 23.781L21.3915 22.4535C20.5665 23.4 19.3515 24.0015 18 24.0015C16.6485 24.0015 15.4335 23.4015 14.6085 22.4535L13.281 23.781C13.134 23.928 12.942 24 12.75 24C12.558 24 12.366 23.9265 12.219 23.781C11.9265 23.4885 11.9265 23.013 12.219 22.7205L13.8075 21.132C13.6095 20.625 13.5 20.076 13.5 19.5H12.75C12.336 19.5 12 19.164 12 18.75C12 18.336 12.336 18 12.75 18H13.5V16.0605L12.219 14.7795C11.9265 14.487 11.9265 14.0115 12.219 13.719C12.5115 13.4265 12.987 13.4265 13.2795 13.719L14.5605 15H15C15 13.3455 16.3455 12 18 12C19.6545 12 21 13.3455 21 15H21.4395L22.7205 13.719C23.013 13.4265 23.4885 13.4265 23.781 13.719C24.0735 14.0115 24.0735 14.487 23.781 14.7795L22.5 16.0605V18H23.25C23.664 18 24 18.336 24 18.75C24 19.164 23.664 19.5 23.25 19.5H22.5ZM16.5 15H19.5C19.5 14.172 18.828 13.5 18 13.5C17.172 13.5 16.5 14.172 16.5 15ZM21 16.5H15V19.5C15 21.1545 16.3455 22.5 18 22.5C19.6545 22.5 21 21.1545 21 19.5V16.5Z"
  />
</svg>
Attribution
"Debug Console" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: bug, issue, error, insect