process icon
process from Unicons by Iconscout · Line · User Interface · Apache-2.0 Free for personal and commercial use.
- Name
- process
- Set
- Unicons
- Style
- Line
- Category
- User Interface
- Viewbox
- 24×24
- License
- Apache 2.0
The same icon in other sets
More user interface icons from Unicons
Use the process icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.97 7.97 0 0 1-2-5.282a7 7 0 0 1 .052-.88a1 1 0 1 0-1.985-.24a9 9 0 0 0-.067 1.12a9.96 9.96 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.98.98 0 0 0 .794-.422l.037-.043c.007-.01.007-.022.013-.032a1 1 0 0 0 .106-.258a1 1 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1m1.5-8.5H6.709a7.97 7.97 0 0 1 5.283-2a7 7 0 0 1 .88.053a1 1 0 0 0 .24-1.987a9 9 0 0 0-1.12-.066a9.96 9.96 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4a1 1 0 0 0 .039.195a1 1 0 0 0 .141.346l.012.017a1 1 0 0 0 .244.246c.011.008.017.02.028.028c.014.01.03.013.045.021a1 1 0 0 0 .18.084a1 1 0 0 0 .261.053c.018 0 .032.01.05.01h4a1 1 0 0 0 0-2m11.96 10.804a1 1 0 0 0-.141-.345l-.011-.017a1 1 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028c-.01-.007-.023-.007-.034-.014a1.2 1.2 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.97 7.97 0 0 1-5.282 2a7 7 0 0 1-.88-.054a1 1 0 0 0-.24 1.987a9 9 0 0 0 1.12.067a9.96 9.96 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a1 1 0 0 0-.04-.195Zm.54-11.304a1 1 0 0 0 0-2h-4a1 1 0 0 0-.192.039l-.007.001a1 1 0 0 0-.34.14l-.02.013a1 1 0 0 0-.245.244c-.008.01-.02.016-.028.027c-.007.01-.007.023-.014.034a1.2 1.2 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 1 0 2 0V6.719a7.98 7.98 0 0 1 2 5.283a7 7 0 0 1-.053.88a1 1 0 0 0 .872 1.113a1 1 0 0 0 .122.007a1 1 0 0 0 .991-.88a9 9 0 0 0 .068-1.12a9.96 9.96 0 0 0-2.417-6.5Z"/></svg>
React
import type { SVGProps } from "react";
export function UilProcess(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="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.97 7.97 0 0 1-2-5.282a7 7 0 0 1 .052-.88a1 1 0 1 0-1.985-.24a9 9 0 0 0-.067 1.12a9.96 9.96 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.98.98 0 0 0 .794-.422l.037-.043c.007-.01.007-.022.013-.032a1 1 0 0 0 .106-.258a1 1 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1m1.5-8.5H6.709a7.97 7.97 0 0 1 5.283-2a7 7 0 0 1 .88.053a1 1 0 0 0 .24-1.987a9 9 0 0 0-1.12-.066a9.96 9.96 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4a1 1 0 0 0 .039.195a1 1 0 0 0 .141.346l.012.017a1 1 0 0 0 .244.246c.011.008.017.02.028.028c.014.01.03.013.045.021a1 1 0 0 0 .18.084a1 1 0 0 0 .261.053c.018 0 .032.01.05.01h4a1 1 0 0 0 0-2m11.96 10.804a1 1 0 0 0-.141-.345l-.011-.017a1 1 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028c-.01-.007-.023-.007-.034-.014a1.2 1.2 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.97 7.97 0 0 1-5.282 2a7 7 0 0 1-.88-.054a1 1 0 0 0-.24 1.987a9 9 0 0 0 1.12.067a9.96 9.96 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a1 1 0 0 0-.04-.195Zm.54-11.304a1 1 0 0 0 0-2h-4a1 1 0 0 0-.192.039l-.007.001a1 1 0 0 0-.34.14l-.02.013a1 1 0 0 0-.245.244c-.008.01-.02.016-.028.027c-.007.01-.007.023-.014.034a1.2 1.2 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 1 0 2 0V6.719a7.98 7.98 0 0 1 2 5.283a7 7 0 0 1-.053.88a1 1 0 0 0 .872 1.113a1 1 0 0 0 .122.007a1 1 0 0 0 .991-.88a9 9 0 0 0 .068-1.12a9.96 9.96 0 0 0-2.417-6.5Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.97 7.97 0 0 1-2-5.282a7 7 0 0 1 .052-.88a1 1 0 1 0-1.985-.24a9 9 0 0 0-.067 1.12a9.96 9.96 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.98.98 0 0 0 .794-.422l.037-.043c.007-.01.007-.022.013-.032a1 1 0 0 0 .106-.258a1 1 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1m1.5-8.5H6.709a7.97 7.97 0 0 1 5.283-2a7 7 0 0 1 .88.053a1 1 0 0 0 .24-1.987a9 9 0 0 0-1.12-.066a9.96 9.96 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4a1 1 0 0 0 .039.195a1 1 0 0 0 .141.346l.012.017a1 1 0 0 0 .244.246c.011.008.017.02.028.028c.014.01.03.013.045.021a1 1 0 0 0 .18.084a1 1 0 0 0 .261.053c.018 0 .032.01.05.01h4a1 1 0 0 0 0-2m11.96 10.804a1 1 0 0 0-.141-.345l-.011-.017a1 1 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028c-.01-.007-.023-.007-.034-.014a1.2 1.2 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.97 7.97 0 0 1-5.282 2a7 7 0 0 1-.88-.054a1 1 0 0 0-.24 1.987a9 9 0 0 0 1.12.067a9.96 9.96 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a1 1 0 0 0-.04-.195Zm.54-11.304a1 1 0 0 0 0-2h-4a1 1 0 0 0-.192.039l-.007.001a1 1 0 0 0-.34.14l-.02.013a1 1 0 0 0-.245.244c-.008.01-.02.016-.028.027c-.007.01-.007.023-.014.034a1.2 1.2 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 1 0 2 0V6.719a7.98 7.98 0 0 1 2 5.283a7 7 0 0 1-.053.88a1 1 0 0 0 .872 1.113a1 1 0 0 0 .122.007a1 1 0 0 0 .991-.88a9 9 0 0 0 .068-1.12a9.96 9.96 0 0 0-2.417-6.5Z"/></svg> </template>
CSS
.icon-process {
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%22M6.992%2014.502a1%201%200%200%200-1%201v1.782a7.97%207.97%200%200%201-2-5.282a7%207%200%200%201%20.052-.88a1%201%200%201%200-1.985-.24a9%209%200%200%200-.067%201.12a9.96%209.96%200%200%200%202.417%206.5H2.992a1%201%200%201%200%200%202h4a.98.98%200%200%200%20.794-.422l.037-.043c.007-.01.007-.022.013-.032a1%201%200%200%200%20.106-.258a1%201%200%200%200%20.032-.156c.003-.03.018-.057.018-.089v-4a1%201%200%200%200-1-1m1.5-8.5H6.709a7.97%207.97%200%200%201%205.283-2a7%207%200%200%201%20.88.053a1%201%200%200%200%20.24-1.987a9%209%200%200%200-1.12-.066a9.96%209.96%200%200%200-6.5%202.417V3.002a1%201%200%200%200-2%200v4a1%201%200%200%200%20.039.195a1%201%200%200%200%20.141.346l.012.017a1%201%200%200%200%20.244.246c.011.008.017.02.028.028c.014.01.03.013.045.021a1%201%200%200%200%20.18.084a1%201%200%200%200%20.261.053c.018%200%20.032.01.05.01h4a1%201%200%200%200%200-2m11.96%2010.804a1%201%200%200%200-.141-.345l-.011-.017a1%201%200%200%200-.245-.246c-.011-.008-.016-.02-.028-.028c-.01-.007-.023-.007-.034-.014a1.2%201.2%200%200%200-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1%201%200%200%200%200%202h1.782a7.97%207.97%200%200%201-5.282%202a7%207%200%200%201-.88-.054a1%201%200%200%200-.24%201.987a9%209%200%200%200%201.12.067a9.96%209.96%200%200%200%206.5-2.417v1.417a1%201%200%200%200%202%200v-4a1%201%200%200%200-.04-.195Zm.54-11.304a1%201%200%200%200%200-2h-4a1%201%200%200%200-.192.039l-.007.001a1%201%200%200%200-.34.14l-.02.013a1%201%200%200%200-.245.244c-.008.01-.02.016-.028.027c-.007.01-.007.023-.014.034a1.2%201.2%200%200%200-.136.413c-.003.03-.018.057-.018.089v4a1%201%200%201%200%202%200V6.719a7.98%207.98%200%200%201%202%205.283a7%207%200%200%201-.053.88a1%201%200%200%200%20.872%201.113a1%201%200%200%200%20.122.007a1%201%200%200%200%20.991-.88a9%209%200%200%200%20.068-1.12a9.96%209.96%200%200%200-2.417-6.5Z%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%22M6.992%2014.502a1%201%200%200%200-1%201v1.782a7.97%207.97%200%200%201-2-5.282a7%207%200%200%201%20.052-.88a1%201%200%201%200-1.985-.24a9%209%200%200%200-.067%201.12a9.96%209.96%200%200%200%202.417%206.5H2.992a1%201%200%201%200%200%202h4a.98.98%200%200%200%20.794-.422l.037-.043c.007-.01.007-.022.013-.032a1%201%200%200%200%20.106-.258a1%201%200%200%200%20.032-.156c.003-.03.018-.057.018-.089v-4a1%201%200%200%200-1-1m1.5-8.5H6.709a7.97%207.97%200%200%201%205.283-2a7%207%200%200%201%20.88.053a1%201%200%200%200%20.24-1.987a9%209%200%200%200-1.12-.066a9.96%209.96%200%200%200-6.5%202.417V3.002a1%201%200%200%200-2%200v4a1%201%200%200%200%20.039.195a1%201%200%200%200%20.141.346l.012.017a1%201%200%200%200%20.244.246c.011.008.017.02.028.028c.014.01.03.013.045.021a1%201%200%200%200%20.18.084a1%201%200%200%200%20.261.053c.018%200%20.032.01.05.01h4a1%201%200%200%200%200-2m11.96%2010.804a1%201%200%200%200-.141-.345l-.011-.017a1%201%200%200%200-.245-.246c-.011-.008-.016-.02-.028-.028c-.01-.007-.023-.007-.034-.014a1.2%201.2%200%200%200-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1%201%200%200%200%200%202h1.782a7.97%207.97%200%200%201-5.282%202a7%207%200%200%201-.88-.054a1%201%200%200%200-.24%201.987a9%209%200%200%200%201.12.067a9.96%209.96%200%200%200%206.5-2.417v1.417a1%201%200%200%200%202%200v-4a1%201%200%200%200-.04-.195Zm.54-11.304a1%201%200%200%200%200-2h-4a1%201%200%200%200-.192.039l-.007.001a1%201%200%200%200-.34.14l-.02.013a1%201%200%200%200-.245.244c-.008.01-.02.016-.028.027c-.007.01-.007.023-.014.034a1.2%201.2%200%200%200-.136.413c-.003.03-.018.057-.018.089v4a1%201%200%201%200%202%200V6.719a7.98%207.98%200%200%201%202%205.283a7%207%200%200%201-.053.88a1%201%200%200%200%20.872%201.113a1%201%200%200%200%20.122.007a1%201%200%200%200%20.991-.88a9%209%200%200%200%20.068-1.12a9.96%209.96%200%200%200-2.417-6.5Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/uil/process.svg?color=%231a73e8&size=48
