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

VS Code Icons · VscSymbolSnippet

Symbol Snippet icon

A free symbol snippet 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

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/symbol-snippet.json

components/icons/vscode-codicons-symbol-snippet.tsx

import * as React from "react";

/**
 * Symbol Snippet from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/symbol-snippet. Sized in em, colored by currentColor.
 */
export function VscSymbolSnippetIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M12.5 12C12.3674 12 12.2402 11.9473 12.1464 11.8536C12.0527 11.7598 12 11.6326 12 11.5V4C12 3.73478 11.8946 3.48043 11.7071 3.29289C11.5196 3.10536 11.2652 3 11 3H5C4.73478 3 4.48043 3.10536 4.29289 3.29289C4.10536 3.48043 4 3.73478 4 4V11.5C4 11.6326 3.94732 11.7598 3.85355 11.8536C3.75979 11.9473 3.63261 12 3.5 12C3.36739 12 3.24021 11.9473 3.14645 11.8536C3.05268 11.7598 3 11.6326 3 11.5V4C3 3.46957 3.21071 2.96086 3.58579 2.58579C3.96086 2.21071 4.46957 2 5 2H11C11.5304 2 12.0391 2.21071 12.4142 2.58579C12.7893 2.96086 13 3.46957 13 4V11.5C13 11.6326 12.9473 11.7598 12.8536 11.8536C12.7598 11.9473 12.6326 12 12.5 12Z"
      />
      <path
        d="M5.5 13.5C5.5 13.6326 5.44732 13.7598 5.35355 13.8536C5.25979 13.9473 5.13261 14 5 14H3.5C3.36739 14 3.24021 13.9473 3.14645 13.8536C3.05268 13.7598 3 13.6326 3 13.5C3 13.3674 3.05268 13.2402 3.14645 13.1464C3.24021 13.0527 3.36739 13 3.5 13H5C5.13261 13 5.25979 13.0527 5.35355 13.1464C5.44732 13.2402 5.5 13.3674 5.5 13.5ZM9 13H7C6.86739 13 6.74021 13.0527 6.64645 13.1464C6.55268 13.2402 6.5 13.3674 6.5 13.5C6.5 13.6326 6.55268 13.7598 6.64645 13.8536C6.74021 13.9473 6.86739 14 7 14H9C9.13261 14 9.25979 13.9473 9.35355 13.8536C9.44732 13.7598 9.5 13.6326 9.5 13.5C9.5 13.3674 9.44732 13.2402 9.35355 13.1464C9.25979 13.0527 9.13261 13 9 13ZM12.5 13H11C10.8674 13 10.7402 13.0527 10.6464 13.1464C10.5527 13.2402 10.5 13.3674 10.5 13.5C10.5 13.6326 10.5527 13.7598 10.6464 13.8536C10.7402 13.9473 10.8674 14 11 14H12.5C12.6326 14 12.7598 13.9473 12.8536 13.8536C12.9473 13.7598 13 13.6326 13 13.5C13 13.3674 12.9473 13.2402 12.8536 13.1464C12.7598 13.0527 12.6326 13 12.5 13Z"
      />
    </svg>
  );
}

With react-icons

import { VscSymbolSnippet } from "react-icons/vsc";

export function Example() {
  return <VscSymbolSnippet className="size-5" />;
}

symbol-snippet.svg

<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M12.5 12C12.3674 12 12.2402 11.9473 12.1464 11.8536C12.0527 11.7598 12 11.6326 12 11.5V4C12 3.73478 11.8946 3.48043 11.7071 3.29289C11.5196 3.10536 11.2652 3 11 3H5C4.73478 3 4.48043 3.10536 4.29289 3.29289C4.10536 3.48043 4 3.73478 4 4V11.5C4 11.6326 3.94732 11.7598 3.85355 11.8536C3.75979 11.9473 3.63261 12 3.5 12C3.36739 12 3.24021 11.9473 3.14645 11.8536C3.05268 11.7598 3 11.6326 3 11.5V4C3 3.46957 3.21071 2.96086 3.58579 2.58579C3.96086 2.21071 4.46957 2 5 2H11C11.5304 2 12.0391 2.21071 12.4142 2.58579C12.7893 2.96086 13 3.46957 13 4V11.5C13 11.6326 12.9473 11.7598 12.8536 11.8536C12.7598 11.9473 12.6326 12 12.5 12Z"
  />
  <path
    d="M5.5 13.5C5.5 13.6326 5.44732 13.7598 5.35355 13.8536C5.25979 13.9473 5.13261 14 5 14H3.5C3.36739 14 3.24021 13.9473 3.14645 13.8536C3.05268 13.7598 3 13.6326 3 13.5C3 13.3674 3.05268 13.2402 3.14645 13.1464C3.24021 13.0527 3.36739 13 3.5 13H5C5.13261 13 5.25979 13.0527 5.35355 13.1464C5.44732 13.2402 5.5 13.3674 5.5 13.5ZM9 13H7C6.86739 13 6.74021 13.0527 6.64645 13.1464C6.55268 13.2402 6.5 13.3674 6.5 13.5C6.5 13.6326 6.55268 13.7598 6.64645 13.8536C6.74021 13.9473 6.86739 14 7 14H9C9.13261 14 9.25979 13.9473 9.35355 13.8536C9.44732 13.7598 9.5 13.6326 9.5 13.5C9.5 13.3674 9.44732 13.2402 9.35355 13.1464C9.25979 13.0527 9.13261 13 9 13ZM12.5 13H11C10.8674 13 10.7402 13.0527 10.6464 13.1464C10.5527 13.2402 10.5 13.3674 10.5 13.5C10.5 13.6326 10.5527 13.7598 10.6464 13.8536C10.7402 13.9473 10.8674 14 11 14H12.5C12.6326 14 12.7598 13.9473 12.8536 13.8536C12.9473 13.7598 13 13.6326 13 13.5C13 13.3674 12.9473 13.2402 12.8536 13.1464C12.7598 13.0527 12.6326 13 12.5 13Z"
  />
</svg>

Attribution

"Symbol Snippet" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons:

Similar VS Code Icons icons