Arrow Swap Icon
Free SVG icon from the VS Code Codicons collection. Download or copy for use in any project.
The Arrow Swap icon is commonly used in navigation controls, pagination and call-to-action buttons. Available as a free SVG - copy the code or download directly.
img tag
<img src="https://proicons.com/icon/306996.svg" alt="Arrow Swap icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/306996.svg" alt="Arrow Swap icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/306996.svg" alt="Arrow Swap icon" :width="24" :height="24" />
CSS background
.icon-arrow-swap {
background-image: url('https://proicons.com/icon/306996.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M11.3536 1.64645C11.1583 1.45118 10.8417 1.45118 10.6464 1.64645C10.4512 1.84171 10.4512 2.15829 10.6464 2.35355L12.2929 4H2.5C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H12.2929L10.6464 6.64645C10.4512 6.84171 10.4512 7.15829 10.6464 7.35355C10.8417 7.54882 11.1583 7.54882 11.3536 7.35355L13.8536 4.85355C14.0488 4.65829 14.0488 4.34171 13.8536 4.14645L11.3536 1.64645ZM5.35355 9.35355C5.54882 9.15829 5.54882 8.84171 5.35355 8.64645C5.15829 8.45118 4.84171 8.45118 4.64645 8.64645L2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536L4.64645 14.3536C4.84171 14.5488 5.15829 14.5488 5.35355 14.3536C5.54882 14.1583 5.54882 13.8417 5.35355 13.6464L3.70711 12H13.5C13.7761 12 14 11.7761 14 11.5C14 11.2239 13.7761 11 13.5 11H3.70711L5.35355 9.35355Z"/></svg>
Arrow Swap in other icon packs
Copied!