sync icon

Sync: sync, synchronize, synchronise, resync. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.856 5.856C13.759 5.952 13.641 6 13.5 6L9.5 6C9.359 6 9.241 5.952 9.144 5.856C9.048 5.759 9 5.641 9 5.5C9 5.359 9.048 5.241 9.144 5.144C9.241 5.048 9.359 5 9.5 5L12.293 5L11.146 3.854C10.939 3.646 10.724 3.482 10.503 3.361C10.301 3.251 10.076 3.168 9.829 3.113C9.605 3.063 9.333 3.031 9.015 3.015C8.809 3.005 8.471 3 8 3C7.397 3 6.813 3.106 6.248 3.317C5.64 3.545 5.097 3.878 4.619 4.317C4.141 4.756 3.762 5.268 3.484 5.854C3.225 6.399 3.07 6.972 3.018 7.573C3.006 7.714 2.948 7.828 2.844 7.915C2.74 8.003 2.618 8.041 2.477 8.029C2.337 8.017 2.223 7.959 2.135 7.855C2.048 7.751 2.01 7.628 2.022 7.488C2.084 6.767 2.27 6.079 2.581 5.425C2.915 4.722 3.369 4.107 3.942 3.58C4.516 3.053 5.168 2.654 5.897 2.381C6.575 2.127 7.276 2 8 2C8.487 2 8.842 2.005 9.063 2.016C9.439 2.035 9.766 2.075 10.046 2.137C10.73 2.289 11.333 2.625 11.854 3.146L13 4.293L13 1.5C13 1.359 13.048 1.241 13.144 1.144C13.241 1.048 13.359 1 13.5 1C13.641 1 13.759 1.048 13.856 1.144C13.952 1.241 14 1.359 14 1.5L14 5.5C14 5.641 13.952 5.759 13.856 5.856ZM3 11.707L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 10.5C2 10.359 2.048 10.241 2.144 10.144C2.241 10.048 2.359 10 2.5 10L6.5 10C6.641 10 6.759 10.048 6.856 10.144C6.952 10.241 7 10.359 7 10.5C7 10.641 6.952 10.759 6.856 10.856C6.759 10.952 6.641 11 6.5 11L3.707 11L4.854 12.146C5.061 12.354 5.276 12.518 5.497 12.639C5.699 12.749 5.924 12.832 6.171 12.887C6.395 12.937 6.667 12.969 6.985 12.985C7.191 12.995 7.529 13 8 13C8.603 13 9.187 12.894 9.752 12.683C10.36 12.455 10.903 12.122 11.381 11.683C11.859 11.244 12.238 10.732 12.516 10.146C12.775 9.601 12.93 9.028 12.982 8.427C12.994 8.289 13.052 8.176 13.158 8.087C13.263 7.998 13.385 7.959 13.523 7.971C13.663 7.983 13.777 8.041 13.865 8.145C13.952 8.249 13.99 8.371 13.978 8.512C13.916 9.233 13.73 9.921 13.42 10.575C13.085 11.278 12.631 11.893 12.058 12.42C11.484 12.947 10.832 13.346 10.103 13.619C9.425 13.873 8.724 14 8 14C7.513 14 7.158 13.995 6.937 13.984C6.561 13.965 6.234 13.925 5.954 13.863C5.27 13.711 4.667 13.375 4.146 12.854L3 11.707Z"/></svg>

React

// Gentleface "sync" (line-round), MIT. https://gentleface.com/icons/sync
import type { SVGProps } from 'react';

export function SyncIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M13.856 5.856C13.759 5.952 13.641 6 13.5 6L9.5 6C9.359 6 9.241 5.952 9.144 5.856C9.048 5.759 9 5.641 9 5.5C9 5.359 9.048 5.241 9.144 5.144C9.241 5.048 9.359 5 9.5 5L12.293 5L11.146 3.854C10.939 3.646 10.724 3.482 10.503 3.361C10.301 3.251 10.076 3.168 9.829 3.113C9.605 3.063 9.333 3.031 9.015 3.015C8.809 3.005 8.471 3 8 3C7.397 3 6.813 3.106 6.248 3.317C5.64 3.545 5.097 3.878 4.619 4.317C4.141 4.756 3.762 5.268 3.484 5.854C3.225 6.399 3.07 6.972 3.018 7.573C3.006 7.714 2.948 7.828 2.844 7.915C2.74 8.003 2.618 8.041 2.477 8.029C2.337 8.017 2.223 7.959 2.135 7.855C2.048 7.751 2.01 7.628 2.022 7.488C2.084 6.767 2.27 6.079 2.581 5.425C2.915 4.722 3.369 4.107 3.942 3.58C4.516 3.053 5.168 2.654 5.897 2.381C6.575 2.127 7.276 2 8 2C8.487 2 8.842 2.005 9.063 2.016C9.439 2.035 9.766 2.075 10.046 2.137C10.73 2.289 11.333 2.625 11.854 3.146L13 4.293L13 1.5C13 1.359 13.048 1.241 13.144 1.144C13.241 1.048 13.359 1 13.5 1C13.641 1 13.759 1.048 13.856 1.144C13.952 1.241 14 1.359 14 1.5L14 5.5C14 5.641 13.952 5.759 13.856 5.856ZM3 11.707L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 10.5C2 10.359 2.048 10.241 2.144 10.144C2.241 10.048 2.359 10 2.5 10L6.5 10C6.641 10 6.759 10.048 6.856 10.144C6.952 10.241 7 10.359 7 10.5C7 10.641 6.952 10.759 6.856 10.856C6.759 10.952 6.641 11 6.5 11L3.707 11L4.854 12.146C5.061 12.354 5.276 12.518 5.497 12.639C5.699 12.749 5.924 12.832 6.171 12.887C6.395 12.937 6.667 12.969 6.985 12.985C7.191 12.995 7.529 13 8 13C8.603 13 9.187 12.894 9.752 12.683C10.36 12.455 10.903 12.122 11.381 11.683C11.859 11.244 12.238 10.732 12.516 10.146C12.775 9.601 12.93 9.028 12.982 8.427C12.994 8.289 13.052 8.176 13.158 8.087C13.263 7.998 13.385 7.959 13.523 7.971C13.663 7.983 13.777 8.041 13.865 8.145C13.952 8.249 13.99 8.371 13.978 8.512C13.916 9.233 13.73 9.921 13.42 10.575C13.085 11.278 12.631 11.893 12.058 12.42C11.484 12.947 10.832 13.346 10.103 13.619C9.425 13.873 8.724 14 8 14C7.513 14 7.158 13.995 6.937 13.984C6.561 13.965 6.234 13.925 5.954 13.863C5.27 13.711 4.667 13.375 4.146 12.854L3 11.707Z" />
    </svg>
  );
}

Vue

Vue: see /icons/sync.md

Svelte

Svelte: see /icons/sync.md

HTML img

HTML img: see /icons/sync.md

CSS

CSS: see /icons/sync.md

Data URL

Data URL: see /icons/sync.md

Sprite

Sprite: see /icons/sync.md

SwiftUI

SwiftUI: see /icons/sync.md

Compose

Compose: see /icons/sync.md

Android XML

Android XML: see /icons/sync.md

Flutter

Flutter: see /icons/sync.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

sync, synchronize, synchronise, resync, sync now

Don’t confuse with

refresh: the refresh motif does not mean sync

Also fits

refresh: keep two copies in step (sync); motifs.yaml refresh
synced: sync in progress or the sync action (sync)
cloud sync: sync outside cloud storage (sync)
sync contacts: syncing in general

Tags

sync, synchronize, arrows, circular-arrows, cycle, update, reload

Category

Arrows

Component name

SyncIcon

History

2026-10-15 added

Family 3

sync-alert sync-check sync-off

More arrows icons

arrow-down arrow-down-left arrow-down-right arrow-down-to-line arrow-left arrow-left-right arrow-left-to-line arrow-right arrow-right-to-line arrow-up arrow-up-down arrow-up-left arrow-up-right arrow-up-to-line arrows-out chevron-down · all arrows icons

For agents

Metadata: /icons/sync.json · Markdown: /icons/sync.md · SVG: https://gentleface.com/svg/{style}/16/sync.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/sync.png

sync icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp