arrow upload progress icon

arrow-upload-progress from Material Symbols by Google · Regular · UI Actions · Apache-2.0 Free for personal and commercial use.

Name: arrow-upload-progress
Set: Material Symbols
Style: Regular
Category: UI Actions
Viewbox: 24×24
License: Apache 2.0
Aliases: arrow-upload-progress-outline, arrow-upload-progress-outline-sharp, arrow-upload-progress-sharp

1 other variant in Material Symbols

arrow-upload-progress-rounded

The same icon in other sets

arrow-upload-progressMaterial Symbols Light

More ui actions icons from Material Symbols

Use the arrow upload progress icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.025 21.95q-1.9-.2-3.537-1.037t-2.863-2.175T2.7 15.675T2 12q0-3.925 2.613-6.75t6.412-3.2v2.025q-2.975.375-5 2.613T4 12t2.025 5.313t5 2.612zm0-4.95v-6.175l-2.6 2.6L7.025 12l5-5l5 5l-1.425 1.4l-2.575-2.575V17zm2 4.95v-2.025q1.1-.125 2.088-.55t1.812-1.075l1.425 1.45q-1.125.9-2.475 1.475t-2.85.725M16.9 5.7q-.825-.65-1.8-1.075t-2.075-.55V2.05q1.5.15 2.85.725T18.35 4.25zm2.85 12.625L18.325 16.9q.65-.825 1.075-1.812T19.95 13h2.025q-.15 1.5-.737 2.85t-1.488 2.475m.2-7.325q-.125-1.1-.55-2.087T18.325 7.1l1.425-1.425q.9 1.125 1.488 2.475t.737 2.85z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsArrowUploadProgress(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="M11.025 21.95q-1.9-.2-3.537-1.037t-2.863-2.175T2.7 15.675T2 12q0-3.925 2.613-6.75t6.412-3.2v2.025q-2.975.375-5 2.613T4 12t2.025 5.313t5 2.612zm0-4.95v-6.175l-2.6 2.6L7.025 12l5-5l5 5l-1.425 1.4l-2.575-2.575V17zm2 4.95v-2.025q1.1-.125 2.088-.55t1.812-1.075l1.425 1.45q-1.125.9-2.475 1.475t-2.85.725M16.9 5.7q-.825-.65-1.8-1.075t-2.075-.55V2.05q1.5.15 2.85.725T18.35 4.25zm2.85 12.625L18.325 16.9q.65-.825 1.075-1.812T19.95 13h2.025q-.15 1.5-.737 2.85t-1.488 2.475m.2-7.325q-.125-1.1-.55-2.087T18.325 7.1l1.425-1.425q.9 1.125 1.488 2.475t.737 2.85z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.025 21.95q-1.9-.2-3.537-1.037t-2.863-2.175T2.7 15.675T2 12q0-3.925 2.613-6.75t6.412-3.2v2.025q-2.975.375-5 2.613T4 12t2.025 5.313t5 2.612zm0-4.95v-6.175l-2.6 2.6L7.025 12l5-5l5 5l-1.425 1.4l-2.575-2.575V17zm2 4.95v-2.025q1.1-.125 2.088-.55t1.812-1.075l1.425 1.45q-1.125.9-2.475 1.475t-2.85.725M16.9 5.7q-.825-.65-1.8-1.075t-2.075-.55V2.05q1.5.15 2.85.725T18.35 4.25zm2.85 12.625L18.325 16.9q.65-.825 1.075-1.812T19.95 13h2.025q-.15 1.5-.737 2.85t-1.488 2.475m.2-7.325q-.125-1.1-.55-2.087T18.325 7.1l1.425-1.425q.9 1.125 1.488 2.475t.737 2.85z"/></svg>
</template>

CSS

.icon-arrow-upload-progress {
  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%22M11.025%2021.95q-1.9-.2-3.537-1.037t-2.863-2.175T2.7%2015.675T2%2012q0-3.925%202.613-6.75t6.412-3.2v2.025q-2.975.375-5%202.613T4%2012t2.025%205.313t5%202.612zm0-4.95v-6.175l-2.6%202.6L7.025%2012l5-5l5%205l-1.425%201.4l-2.575-2.575V17zm2%204.95v-2.025q1.1-.125%202.088-.55t1.812-1.075l1.425%201.45q-1.125.9-2.475%201.475t-2.85.725M16.9%205.7q-.825-.65-1.8-1.075t-2.075-.55V2.05q1.5.15%202.85.725T18.35%204.25zm2.85%2012.625L18.325%2016.9q.65-.825%201.075-1.812T19.95%2013h2.025q-.15%201.5-.737%202.85t-1.488%202.475m.2-7.325q-.125-1.1-.55-2.087T18.325%207.1l1.425-1.425q.9%201.125%201.488%202.475t.737%202.85z%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%22M11.025%2021.95q-1.9-.2-3.537-1.037t-2.863-2.175T2.7%2015.675T2%2012q0-3.925%202.613-6.75t6.412-3.2v2.025q-2.975.375-5%202.613T4%2012t2.025%205.313t5%202.612zm0-4.95v-6.175l-2.6%202.6L7.025%2012l5-5l5%205l-1.425%201.4l-2.575-2.575V17zm2%204.95v-2.025q1.1-.125%202.088-.55t1.812-1.075l1.425%201.45q-1.125.9-2.475%201.475t-2.85.725M16.9%205.7q-.825-.65-1.8-1.075t-2.075-.55V2.05q1.5.15%202.85.725T18.35%204.25zm2.85%2012.625L18.325%2016.9q.65-.825%201.075-1.812T19.95%2013h2.025q-.15%201.5-.737%202.85t-1.488%202.475m.2-7.325q-.125-1.1-.55-2.087T18.325%207.1l1.425-1.425q.9%201.125%201.488%202.475t.737%202.85z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/arrow-upload-progress.svg?color=%231a73e8&size=48