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 · VscPreserveCase

Preserve Case icon

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

/**
 * Preserve Case from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/preserve-case. Sized in em, colored by currentColor.
 */
export function VscPreserveCaseIcon(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="M4.02602 3.3418C4.16216 2.93404 4.8382 2.93397 4.97426 3.3418L6.97426 9.34277C6.97526 9.34677 6.97817 9.35547 6.97817 9.35547L7.97426 12.3428C8.06126 12.6048 7.91985 12.8876 7.65786 12.9756C7.60486 12.9926 7.55165 13.001 7.49965 13.001C7.29083 13.0008 7.09603 12.868 7.02602 12.6592L6.14028 10.001H2.86L1.97426 12.6592C1.88727 12.919 1.60632 13.0634 1.34243 12.9746C1.08043 12.8866 0.93902 12.6038 1.02602 12.3418L2.02211 9.35547C2.02311 9.35147 2.02602 9.34277 2.02602 9.34277L4.02602 3.3418ZM3.19399 9H5.80629L4.49965 5.08105L3.19399 9Z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M11.4997 3C12.8777 3 13.9997 4.121 13.9997 5.5C13.9997 6.19496 13.7164 6.82435 13.2575 7.27734C14.2852 7.75346 14.9997 8.79421 14.9997 10C14.9997 11.654 13.6537 13 11.9997 13H9.49965C9.22381 12.9998 8.99965 12.7759 8.99965 12.5V3.5C8.99965 3.22411 9.22381 3.00018 9.49965 3H11.4997ZM9.99965 8V12H11.9997C13.1027 12 13.9997 11.103 13.9997 10C13.9997 8.897 13.1027 8 11.9997 8H9.99965ZM9.99965 4V7H11.4997C12.3267 7 12.9997 6.327 12.9997 5.5C12.9997 4.673 12.3267 4 11.4997 4H9.99965Z"
      />
    </svg>
  );
}
With react-icons
import { VscPreserveCase } from "react-icons/vsc";

export function Example() {
  return <VscPreserveCase className="size-5" />;
}
preserve-case.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="M4.02602 3.3418C4.16216 2.93404 4.8382 2.93397 4.97426 3.3418L6.97426 9.34277C6.97526 9.34677 6.97817 9.35547 6.97817 9.35547L7.97426 12.3428C8.06126 12.6048 7.91985 12.8876 7.65786 12.9756C7.60486 12.9926 7.55165 13.001 7.49965 13.001C7.29083 13.0008 7.09603 12.868 7.02602 12.6592L6.14028 10.001H2.86L1.97426 12.6592C1.88727 12.919 1.60632 13.0634 1.34243 12.9746C1.08043 12.8866 0.93902 12.6038 1.02602 12.3418L2.02211 9.35547C2.02311 9.35147 2.02602 9.34277 2.02602 9.34277L4.02602 3.3418ZM3.19399 9H5.80629L4.49965 5.08105L3.19399 9Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M11.4997 3C12.8777 3 13.9997 4.121 13.9997 5.5C13.9997 6.19496 13.7164 6.82435 13.2575 7.27734C14.2852 7.75346 14.9997 8.79421 14.9997 10C14.9997 11.654 13.6537 13 11.9997 13H9.49965C9.22381 12.9998 8.99965 12.7759 8.99965 12.5V3.5C8.99965 3.22411 9.22381 3.00018 9.49965 3H11.4997ZM9.99965 8V12H11.9997C13.1027 12 13.9997 11.103 13.9997 10C13.9997 8.897 13.1027 8 11.9997 8H9.99965ZM9.99965 4V7H11.4997C12.3267 7 12.9997 6.327 12.9997 5.5C12.9997 4.673 12.3267 4 11.4997 4H9.99965Z"
  />
</svg>
Attribution
"Preserve Case" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: