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

VS Code Icons · VscSyncCompact

Sync Compact icon

A free sync compact 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.

Also known asrefresh icon reload icon update icon rotate icon repeat icon loop icon cloud icon storage icon

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/sync-compact.json

components/icons/vscode-codicons-sync-compact.tsx

import * as React from "react";

/**
 * Sync Compact from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/sync-compact. Sized in em, colored by currentColor.
 */
export function VscSyncCompactIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 12 12"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M12.0049 1.50363V4.50114C12.0049 4.7809 11.7851 5.00072 11.5053 5.00072H8.5078C8.22803 5.00072 8.00821 4.7809 8.00821 4.50114C8.00821 4.22137 8.22803 4.00155 8.5078 4.00155H10.5861C9.78673 2.17308 8.0182 1.00405 6.00988 1.00405C3.79173 1.00405 1.81338 2.5028 1.20388 4.64102C1.14393 4.86084 0.9441 5.00072 0.724283 5.00072C0.674325 5.00072 0.634358 5.00072 0.5844 4.98074C0.314625 4.9008 0.16475 4.63103 0.244683 4.36125C0.974075 1.79339 3.3421 0.00488281 6.00988 0.00488281C8.05817 0.00488281 9.91662 1.02403 11.0057 2.69264V1.50363C11.0057 1.22387 11.2255 1.00405 11.5053 1.00405C11.7851 1.00405 12.0049 1.22387 12.0049 1.50363ZM11.4254 7.01904C11.1656 6.9491 10.8858 7.09897 10.8059 7.36875C10.1964 9.50696 8.22803 11.0057 5.99989 11.0057C3.99156 11.0057 2.22303 9.83669 1.4237 8.00821H3.50197C3.78173 8.00821 4.00155 7.7884 4.00155 7.50863C4.00155 7.22886 3.78173 7.00905 3.50197 7.00905H0.504466C0.2247 7.00905 0.00488281 7.22886 0.00488281 7.50863V10.5061C0.00488281 10.7859 0.2247 11.0057 0.504466 11.0057C0.784233 11.0057 1.00405 10.7859 1.00405 10.5061V9.31712C2.09314 10.9757 3.95159 12.0049 5.99989 12.0049C8.66766 12.0049 11.0357 10.2164 11.7651 7.64851C11.845 7.37874 11.6851 7.10896 11.4154 7.02903L11.4254 7.01904Z"
      />
    </svg>
  );
}

With react-icons

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

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

sync-compact.svg

<svg
  viewBox="0 0 12 12"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M12.0049 1.50363V4.50114C12.0049 4.7809 11.7851 5.00072 11.5053 5.00072H8.5078C8.22803 5.00072 8.00821 4.7809 8.00821 4.50114C8.00821 4.22137 8.22803 4.00155 8.5078 4.00155H10.5861C9.78673 2.17308 8.0182 1.00405 6.00988 1.00405C3.79173 1.00405 1.81338 2.5028 1.20388 4.64102C1.14393 4.86084 0.9441 5.00072 0.724283 5.00072C0.674325 5.00072 0.634358 5.00072 0.5844 4.98074C0.314625 4.9008 0.16475 4.63103 0.244683 4.36125C0.974075 1.79339 3.3421 0.00488281 6.00988 0.00488281C8.05817 0.00488281 9.91662 1.02403 11.0057 2.69264V1.50363C11.0057 1.22387 11.2255 1.00405 11.5053 1.00405C11.7851 1.00405 12.0049 1.22387 12.0049 1.50363ZM11.4254 7.01904C11.1656 6.9491 10.8858 7.09897 10.8059 7.36875C10.1964 9.50696 8.22803 11.0057 5.99989 11.0057C3.99156 11.0057 2.22303 9.83669 1.4237 8.00821H3.50197C3.78173 8.00821 4.00155 7.7884 4.00155 7.50863C4.00155 7.22886 3.78173 7.00905 3.50197 7.00905H0.504466C0.2247 7.00905 0.00488281 7.22886 0.00488281 7.50863V10.5061C0.00488281 10.7859 0.2247 11.0057 0.504466 11.0057C0.784233 11.0057 1.00405 10.7859 1.00405 10.5061V9.31712C2.09314 10.9757 3.95159 12.0049 5.99989 12.0049C8.66766 12.0049 11.0357 10.2164 11.7651 7.64851C11.845 7.37874 11.6851 7.10896 11.4154 7.02903L11.4254 7.01904Z"
  />
</svg>

Attribution

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

Related icons: refresh, reload, update, rotate

Similar VS Code Icons icons