Skip to content
Cuelark UI

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

VS Code Icons · VscOutput

Output icon

A free output 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/output.json
components/icons/vscode-codicons-output.tsx
import * as React from "react";

/**
 * Output from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/output. Sized in em, colored by currentColor.
 */
export function VscOutputIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 25"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M8.25 8.06775C7.836 8.06775 7.5 8.40375 7.5 8.81775C7.5 9.23175 7.836 9.56775 8.25 9.56775H15.75C16.164 9.56775 16.5 9.23175 16.5 8.81775C16.5 8.40375 16.164 8.06775 15.75 8.06775H8.25ZM7.5 13.3177C7.5 12.9037 7.836 12.5677 8.25 12.5677H15.75C16.164 12.5677 16.5 12.9037 16.5 13.3177C16.5 13.7317 16.164 14.0677 15.75 14.0677H8.25C7.836 14.0677 7.5 13.7317 7.5 13.3177ZM8.25 17.0677C7.836 17.0677 7.5 17.4037 7.5 17.8177C7.5 18.2317 7.836 18.5677 8.25 18.5677H11.25C11.664 18.5677 12 18.2317 12 17.8177C12 17.4037 11.664 17.0677 11.25 17.0677H8.25ZM6.75 0.567749C6.336 0.567749 6 0.903749 6 1.31775V2.06775H5.25C4.007 2.06775 3 3.07475 3 4.31775V22.3177C3 23.5607 4.007 24.5677 5.25 24.5677H14.25C14.449 24.5677 14.64 24.4888 14.78 24.3477L20.78 18.3477C20.921 18.2067 21 18.0167 21 17.8177V4.31775C21 3.07475 19.993 2.06775 18.75 2.06775H18V1.31775C18 0.903749 17.664 0.567749 17.25 0.567749C16.836 0.567749 16.5 0.903749 16.5 1.31775V2.06775H12.75V1.31775C12.75 0.903749 12.414 0.567749 12 0.567749C11.586 0.567749 11.25 0.903749 11.25 1.31775V2.06775H7.5V1.31775C7.5 0.903749 7.164 0.567749 6.75 0.567749ZM18.75 3.56775C19.164 3.56775 19.5 3.90375 19.5 4.31775V17.0677H15.75C14.507 17.0677 13.5 18.0747 13.5 19.3177V23.0677H5.25C4.836 23.0677 4.5 22.7317 4.5 22.3177V4.31775C4.5 3.90375 4.836 3.56775 5.25 3.56775H18.75ZM18.439 18.5677L15 22.0067V19.3177C15 18.9037 15.336 18.5677 15.75 18.5677H18.439Z"
      />
    </svg>
  );
}
With react-icons
import { VscOutput } from "react-icons/vsc";

export function Example() {
  return <VscOutput className="size-5" />;
}
output.svg
<svg
  viewBox="0 0 24 25"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M8.25 8.06775C7.836 8.06775 7.5 8.40375 7.5 8.81775C7.5 9.23175 7.836 9.56775 8.25 9.56775H15.75C16.164 9.56775 16.5 9.23175 16.5 8.81775C16.5 8.40375 16.164 8.06775 15.75 8.06775H8.25ZM7.5 13.3177C7.5 12.9037 7.836 12.5677 8.25 12.5677H15.75C16.164 12.5677 16.5 12.9037 16.5 13.3177C16.5 13.7317 16.164 14.0677 15.75 14.0677H8.25C7.836 14.0677 7.5 13.7317 7.5 13.3177ZM8.25 17.0677C7.836 17.0677 7.5 17.4037 7.5 17.8177C7.5 18.2317 7.836 18.5677 8.25 18.5677H11.25C11.664 18.5677 12 18.2317 12 17.8177C12 17.4037 11.664 17.0677 11.25 17.0677H8.25ZM6.75 0.567749C6.336 0.567749 6 0.903749 6 1.31775V2.06775H5.25C4.007 2.06775 3 3.07475 3 4.31775V22.3177C3 23.5607 4.007 24.5677 5.25 24.5677H14.25C14.449 24.5677 14.64 24.4888 14.78 24.3477L20.78 18.3477C20.921 18.2067 21 18.0167 21 17.8177V4.31775C21 3.07475 19.993 2.06775 18.75 2.06775H18V1.31775C18 0.903749 17.664 0.567749 17.25 0.567749C16.836 0.567749 16.5 0.903749 16.5 1.31775V2.06775H12.75V1.31775C12.75 0.903749 12.414 0.567749 12 0.567749C11.586 0.567749 11.25 0.903749 11.25 1.31775V2.06775H7.5V1.31775C7.5 0.903749 7.164 0.567749 6.75 0.567749ZM18.75 3.56775C19.164 3.56775 19.5 3.90375 19.5 4.31775V17.0677H15.75C14.507 17.0677 13.5 18.0747 13.5 19.3177V23.0677H5.25C4.836 23.0677 4.5 22.7317 4.5 22.3177V4.31775C4.5 3.90375 4.836 3.56775 5.25 3.56775H18.75ZM18.439 18.5677L15 22.0067V19.3177C15 18.9037 15.336 18.5677 15.75 18.5677H18.439Z"
  />
</svg>
Attribution
"Output" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Output icon in other sets