sync icon

sync from Unicons by Iconscout · Line · User Interface · Apache-2.0 Free for personal and commercial use.

Name: sync
Set: Unicons
Style: Line
Category: User Interface
Viewbox: 24×24
License: Apache 2.0

The same icon in other sets

sync-outlinedAnt Design Icons syncBoxIcons v2 syncCodicons sync-fillEva Icons syncFont Awesome Solid synccss.gg syncIconPark syncIconPark Outline syncIonIcons syncLine Awesome syncMaterial Symbols syncMaterial Symbols Light syncMaterial Design Icons syncOcticons syncPixelarticons syncPrime Icons syncWeb3 Icons syncWeb3 Icons Branded

More user interface icons from Unicons

0-plus 10-plus 12-plus 13-plus 16-plus 17-plus 18-plus 21-plus 3-plus 6-plus adjust adjust-alt adjust-circle adjust-half anchor android-phone-slash ankh archive-alt archway asterisk at auto-flash backspace bag-slash

Use the sync icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19.91 15.51h-4.53a1 1 0 0 0 0 2h2.4A8 8 0 0 1 4 12a1 1 0 0 0-2 0a10 10 0 0 0 16.88 7.23V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-.97-.99M12 2a10 10 0 0 0-6.88 2.77V3a1 1 0 0 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2h-2.4A8 8 0 0 1 20 12a1 1 0 0 0 2 0A10 10 0 0 0 12 2"/></svg>

React

import type { SVGProps } from "react";

export function UilSync(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19.91 15.51h-4.53a1 1 0 0 0 0 2h2.4A8 8 0 0 1 4 12a1 1 0 0 0-2 0a10 10 0 0 0 16.88 7.23V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-.97-.99M12 2a10 10 0 0 0-6.88 2.77V3a1 1 0 0 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2h-2.4A8 8 0 0 1 20 12a1 1 0 0 0 2 0A10 10 0 0 0 12 2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19.91 15.51h-4.53a1 1 0 0 0 0 2h2.4A8 8 0 0 1 4 12a1 1 0 0 0-2 0a10 10 0 0 0 16.88 7.23V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-.97-.99M12 2a10 10 0 0 0-6.88 2.77V3a1 1 0 0 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2h-2.4A8 8 0 0 1 20 12a1 1 0 0 0 2 0A10 10 0 0 0 12 2"/></svg>
</template>

CSS

.icon-sync {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M19.91%2015.51h-4.53a1%201%200%200%200%200%202h2.4A8%208%200%200%201%204%2012a1%201%200%200%200-2%200a10%2010%200%200%200%2016.88%207.23V21a1%201%200%200%200%202%200v-4.5a1%201%200%200%200-.97-.99M12%202a10%2010%200%200%200-6.88%202.77V3a1%201%200%200%200-2%200v4.5a1%201%200%200%200%201%201h4.5a1%201%200%200%200%200-2h-2.4A8%208%200%200%201%2020%2012a1%201%200%200%200%202%200A10%2010%200%200%200%2012%202%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M19.91%2015.51h-4.53a1%201%200%200%200%200%202h2.4A8%208%200%200%201%204%2012a1%201%200%200%200-2%200a10%2010%200%200%200%2016.88%207.23V21a1%201%200%200%200%202%200v-4.5a1%201%200%200%200-.97-.99M12%202a10%2010%200%200%200-6.88%202.77V3a1%201%200%200%200-2%200v4.5a1%201%200%200%200%201%201h4.5a1%201%200%200%200%200-2h-2.4A8%208%200%200%201%2020%2012a1%201%200%200%200%202%200A10%2010%200%200%200%2012%202%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/uil/sync.svg?color=%231a73e8&size=48