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

VS Code Icons · VscWordWrap

Word Wrap icon

A free word wrap 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/word-wrap.json

components/icons/vscode-codicons-word-wrap.tsx

import * as React from "react";

/**
 * Word Wrap from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/word-wrap. Sized in em, colored by currentColor.
 */
export function VscWordWrapIcon(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
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5 6.5V3.75C5 2.765 4.121 2.25 3.251 2.25C2.363 2.25 1.99 2.553 1.897 2.646C1.702 2.841 1.688 3.17 1.883 3.365C2.077 3.561 2.38 3.573 2.576 3.378C2.588 3.37 2.773 3.25 3.25 3.25C3.28 3.25 4 3.256 4 3.75V4.056C3.796 4.023 3.552 4 3.25 4C1.937 4 1.25 4.754 1.25 5.5C1.25 6.246 1.937 7 3.25 7C3.622 7 3.911 6.937 4.145 6.851C4.236 6.943 4.361 7 4.5 7C4.776 7 5 6.776 5 6.5ZM3.251 5C3.623 5 3.857 5.038 4.001 5.074V5.811C3.908 5.885 3.698 6 3.251 6C2.602 6 2.251 5.742 2.251 5.5C2.251 5.258 2.602 5 3.251 5Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.001 7C9.104 7 10.001 5.991 10.001 4.75C10.001 3.509 9.104 2.5 8.001 2.5C7.635 2.5 7.296 2.619 7.001 2.813V1.5C7.001 1.224 6.777 1 6.501 1C6.225 1 6.001 1.224 6.001 1.5V6.5C6.001 6.776 6.225 7 6.501 7C6.718 7 6.898 6.86 6.967 6.666C7.27 6.873 7.621 7 8.001 7ZM8.001 3.5C8.553 3.5 9.001 4.061 9.001 4.75C9.001 5.439 8.553 6 8.001 6C7.449 6 7.001 5.439 7.001 4.75C7.001 4.061 7.449 3.5 8.001 3.5Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.539 13.653C4.31 13.857 3.699 13.976 3.33 13.514C3.117 13.248 3 12.888 3 12.5C3 12.112 3.118 11.752 3.33 11.486C3.701 11.022 4.311 11.141 4.54 11.347C4.744 11.533 5.06 11.515 5.246 11.311C5.431 11.106 5.415 10.79 5.209 10.605C4.422 9.895 3.233 10.009 2.549 10.861C2.195 11.305 2 11.886 2 12.5C2 13.114 2.195 13.696 2.549 14.139C2.93 14.613 3.445 14.875 4 14.875C4.441 14.875 4.859 14.709 5.208 14.395C5.413 14.21 5.43 13.894 5.245 13.689C5.059 13.484 4.743 13.466 4.539 13.653Z"
      />
      <path
        d="M12.5 4H11.5C11.224 4 11 4.224 11 4.5C11 4.776 11.224 5 11.5 5H12.5C12.775 5 13 5.224 13 5.5V11.499C13 11.775 12.775 11.999 12.5 11.999H8.707L9.853 10.853C10.048 10.658 10.048 10.341 9.853 10.146C9.658 9.951 9.341 9.951 9.146 10.146L7.146 12.146C7.049 12.244 7 12.372 7 12.5C7 12.628 7.048 12.756 7.146 12.854L9.146 14.854C9.341 15.049 9.658 15.049 9.853 14.854C10.048 14.659 10.048 14.342 9.853 14.147L8.707 13.001H12.5C13.327 13.001 14 12.328 14 11.501V5.5C14 4.673 13.327 4 12.5 4Z"
      />
    </svg>
  );
}

With react-icons

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

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

word-wrap.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
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M5 6.5V3.75C5 2.765 4.121 2.25 3.251 2.25C2.363 2.25 1.99 2.553 1.897 2.646C1.702 2.841 1.688 3.17 1.883 3.365C2.077 3.561 2.38 3.573 2.576 3.378C2.588 3.37 2.773 3.25 3.25 3.25C3.28 3.25 4 3.256 4 3.75V4.056C3.796 4.023 3.552 4 3.25 4C1.937 4 1.25 4.754 1.25 5.5C1.25 6.246 1.937 7 3.25 7C3.622 7 3.911 6.937 4.145 6.851C4.236 6.943 4.361 7 4.5 7C4.776 7 5 6.776 5 6.5ZM3.251 5C3.623 5 3.857 5.038 4.001 5.074V5.811C3.908 5.885 3.698 6 3.251 6C2.602 6 2.251 5.742 2.251 5.5C2.251 5.258 2.602 5 3.251 5Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M8.001 7C9.104 7 10.001 5.991 10.001 4.75C10.001 3.509 9.104 2.5 8.001 2.5C7.635 2.5 7.296 2.619 7.001 2.813V1.5C7.001 1.224 6.777 1 6.501 1C6.225 1 6.001 1.224 6.001 1.5V6.5C6.001 6.776 6.225 7 6.501 7C6.718 7 6.898 6.86 6.967 6.666C7.27 6.873 7.621 7 8.001 7ZM8.001 3.5C8.553 3.5 9.001 4.061 9.001 4.75C9.001 5.439 8.553 6 8.001 6C7.449 6 7.001 5.439 7.001 4.75C7.001 4.061 7.449 3.5 8.001 3.5Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M4.539 13.653C4.31 13.857 3.699 13.976 3.33 13.514C3.117 13.248 3 12.888 3 12.5C3 12.112 3.118 11.752 3.33 11.486C3.701 11.022 4.311 11.141 4.54 11.347C4.744 11.533 5.06 11.515 5.246 11.311C5.431 11.106 5.415 10.79 5.209 10.605C4.422 9.895 3.233 10.009 2.549 10.861C2.195 11.305 2 11.886 2 12.5C2 13.114 2.195 13.696 2.549 14.139C2.93 14.613 3.445 14.875 4 14.875C4.441 14.875 4.859 14.709 5.208 14.395C5.413 14.21 5.43 13.894 5.245 13.689C5.059 13.484 4.743 13.466 4.539 13.653Z"
  />
  <path
    d="M12.5 4H11.5C11.224 4 11 4.224 11 4.5C11 4.776 11.224 5 11.5 5H12.5C12.775 5 13 5.224 13 5.5V11.499C13 11.775 12.775 11.999 12.5 11.999H8.707L9.853 10.853C10.048 10.658 10.048 10.341 9.853 10.146C9.658 9.951 9.341 9.951 9.146 10.146L7.146 12.146C7.049 12.244 7 12.372 7 12.5C7 12.628 7.048 12.756 7.146 12.854L9.146 14.854C9.341 15.049 9.658 15.049 9.853 14.854C10.048 14.659 10.048 14.342 9.853 14.147L8.707 13.001H12.5C13.327 13.001 14 12.328 14 11.501V5.5C14 4.673 13.327 4 12.5 4Z"
  />
</svg>

Attribution

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

Related icons:

whole word

Related icons:

Similar VS Code Icons icons