versions icon

versions-24 from Octicons by GitHub · 24 · MIT Free for personal and commercial use.

Name: versions-24
Set: Octicons
Style: 24
Viewbox: 24×24
License: MIT

2 other variants in Octicons

The same icon in other sets

Use the versions icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2Zm-.5-2a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V4a.5.5 0 0 0-.5-.5H10a.5.5 0 0 0-.5.5ZM6.17 4.165a.75.75 0 0 1-.335 1.006c-.228.114-.295.177-.315.201a.04.04 0 0 0-.008.016a.4.4 0 0 0-.012.112v13c0 .07.008.102.012.112a.03.03 0 0 0 .008.016c.02.024.087.087.315.201a.749.749 0 1 1-.67 1.342c-.272-.136-.58-.315-.81-.598C4.1 19.259 4 18.893 4 18.5v-13c0-.393.1-.759.355-1.073c.23-.283.538-.462.81-.598a.75.75 0 0 1 1.006.336ZM2.15 5.624a.75.75 0 0 1-.274 1.025q-.225.132-.32.245C1.5 6.96 1.5 6.99 1.5 7v10c0 .01 0 .04.056.106q.095.113.32.245a.75.75 0 0 1-.752 1.298C.73 18.421 0 17.907 0 17V7c0-.907.73-1.42 1.124-1.65a.75.75 0 0 1 1.025.274Z"/></svg>

React

import type { SVGProps } from "react";

export function OcticonVersions24(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="M10 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2Zm-.5-2a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V4a.5.5 0 0 0-.5-.5H10a.5.5 0 0 0-.5.5ZM6.17 4.165a.75.75 0 0 1-.335 1.006c-.228.114-.295.177-.315.201a.04.04 0 0 0-.008.016a.4.4 0 0 0-.012.112v13c0 .07.008.102.012.112a.03.03 0 0 0 .008.016c.02.024.087.087.315.201a.749.749 0 1 1-.67 1.342c-.272-.136-.58-.315-.81-.598C4.1 19.259 4 18.893 4 18.5v-13c0-.393.1-.759.355-1.073c.23-.283.538-.462.81-.598a.75.75 0 0 1 1.006.336ZM2.15 5.624a.75.75 0 0 1-.274 1.025q-.225.132-.32.245C1.5 6.96 1.5 6.99 1.5 7v10c0 .01 0 .04.056.106q.095.113.32.245a.75.75 0 0 1-.752 1.298C.73 18.421 0 17.907 0 17V7c0-.907.73-1.42 1.124-1.65a.75.75 0 0 1 1.025.274Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2Zm-.5-2a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V4a.5.5 0 0 0-.5-.5H10a.5.5 0 0 0-.5.5ZM6.17 4.165a.75.75 0 0 1-.335 1.006c-.228.114-.295.177-.315.201a.04.04 0 0 0-.008.016a.4.4 0 0 0-.012.112v13c0 .07.008.102.012.112a.03.03 0 0 0 .008.016c.02.024.087.087.315.201a.749.749 0 1 1-.67 1.342c-.272-.136-.58-.315-.81-.598C4.1 19.259 4 18.893 4 18.5v-13c0-.393.1-.759.355-1.073c.23-.283.538-.462.81-.598a.75.75 0 0 1 1.006.336ZM2.15 5.624a.75.75 0 0 1-.274 1.025q-.225.132-.32.245C1.5 6.96 1.5 6.99 1.5 7v10c0 .01 0 .04.056.106q.095.113.32.245a.75.75 0 0 1-.752 1.298C.73 18.421 0 17.907 0 17V7c0-.907.73-1.42 1.124-1.65a.75.75 0 0 1 1.025.274Z"/></svg>
</template>

CSS

.icon-versions-24 {
  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%22M10%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h11a2%202%200%200%201%202%202v16a2%202%200%200%201-2%202Zm-.5-2a.5.5%200%200%200%20.5.5h11a.5.5%200%200%200%20.5-.5V4a.5.5%200%200%200-.5-.5H10a.5.5%200%200%200-.5.5ZM6.17%204.165a.75.75%200%200%201-.335%201.006c-.228.114-.295.177-.315.201a.04.04%200%200%200-.008.016a.4.4%200%200%200-.012.112v13c0%20.07.008.102.012.112a.03.03%200%200%200%20.008.016c.02.024.087.087.315.201a.749.749%200%201%201-.67%201.342c-.272-.136-.58-.315-.81-.598C4.1%2019.259%204%2018.893%204%2018.5v-13c0-.393.1-.759.355-1.073c.23-.283.538-.462.81-.598a.75.75%200%200%201%201.006.336ZM2.15%205.624a.75.75%200%200%201-.274%201.025q-.225.132-.32.245C1.5%206.96%201.5%206.99%201.5%207v10c0%20.01%200%20.04.056.106q.095.113.32.245a.75.75%200%200%201-.752%201.298C.73%2018.421%200%2017.907%200%2017V7c0-.907.73-1.42%201.124-1.65a.75.75%200%200%201%201.025.274Z%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%22M10%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h11a2%202%200%200%201%202%202v16a2%202%200%200%201-2%202Zm-.5-2a.5.5%200%200%200%20.5.5h11a.5.5%200%200%200%20.5-.5V4a.5.5%200%200%200-.5-.5H10a.5.5%200%200%200-.5.5ZM6.17%204.165a.75.75%200%200%201-.335%201.006c-.228.114-.295.177-.315.201a.04.04%200%200%200-.008.016a.4.4%200%200%200-.012.112v13c0%20.07.008.102.012.112a.03.03%200%200%200%20.008.016c.02.024.087.087.315.201a.749.749%200%201%201-.67%201.342c-.272-.136-.58-.315-.81-.598C4.1%2019.259%204%2018.893%204%2018.5v-13c0-.393.1-.759.355-1.073c.23-.283.538-.462.81-.598a.75.75%200%200%201%201.006.336ZM2.15%205.624a.75.75%200%200%201-.274%201.025q-.225.132-.32.245C1.5%206.96%201.5%206.99%201.5%207v10c0%20.01%200%20.04.056.106q.095.113.32.245a.75.75%200%200%201-.752%201.298C.73%2018.421%200%2017.907%200%2017V7c0-.907.73-1.42%201.124-1.65a.75.75%200%200%201%201.025.274Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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