process icon

process from Carbon by IBM · Outline · Actions · Apache-2.0 Free for personal and commercial use.

Name
process
Set
Carbon
Style
Outline
Category
Actions
Viewbox
32×32
License
Apache 2.0

The same icon in other sets

More actions icons from Carbon

Use the process icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M12 25c-.738 0-1.376.405-1.723 1h-5.63l2.648-5.092c.227.055.461.092.705.092c1.654 0 3-1.346 3-3s-1.346-3-3-3s-3 1.346-3 3c0 .679.235 1.298.616 1.801L2.113 26.54A1 1 0 0 0 3 28h7.277c.347.595.985 1 1.723 1a2 2 0 0 0 0-4m-4-8a1.001 1.001 0 0 1 0 2a1 1 0 0 1 0-2m21.887 9.539l-4.04-7.771A2 2 0 1 0 24 20c.075 0 .147-.014.22-.023L27.353 26h-4.537A2.995 2.995 0 0 0 20 24c-1.654 0-3 1.346-3 3s1.346 3 3 3a2.995 2.995 0 0 0 2.816-2H29a1 1 0 0 0 .887-1.462ZM20 28a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2m1-20a3 3 0 0 0-.705.092L16.887 1.54C16.715 1.207 16.357 1 16 1s-.715.207-.887.539L11.22 9.023C11.148 9.014 11.076 9 11 9a2 2 0 1 0 1.846 1.232L16 4.168l2.616 5.03A2.97 2.97 0 0 0 18 11c0 1.654 1.346 3 3 3s3-1.346 3-3s-1.346-3-3-3m0 4a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2"/></svg>

React

import type { SVGProps } from "react";

export function CarbonProcess(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M12 25c-.738 0-1.376.405-1.723 1h-5.63l2.648-5.092c.227.055.461.092.705.092c1.654 0 3-1.346 3-3s-1.346-3-3-3s-3 1.346-3 3c0 .679.235 1.298.616 1.801L2.113 26.54A1 1 0 0 0 3 28h7.277c.347.595.985 1 1.723 1a2 2 0 0 0 0-4m-4-8a1.001 1.001 0 0 1 0 2a1 1 0 0 1 0-2m21.887 9.539l-4.04-7.771A2 2 0 1 0 24 20c.075 0 .147-.014.22-.023L27.353 26h-4.537A2.995 2.995 0 0 0 20 24c-1.654 0-3 1.346-3 3s1.346 3 3 3a2.995 2.995 0 0 0 2.816-2H29a1 1 0 0 0 .887-1.462ZM20 28a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2m1-20a3 3 0 0 0-.705.092L16.887 1.54C16.715 1.207 16.357 1 16 1s-.715.207-.887.539L11.22 9.023C11.148 9.014 11.076 9 11 9a2 2 0 1 0 1.846 1.232L16 4.168l2.616 5.03A2.97 2.97 0 0 0 18 11c0 1.654 1.346 3 3 3s3-1.346 3-3s-1.346-3-3-3m0 4a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M12 25c-.738 0-1.376.405-1.723 1h-5.63l2.648-5.092c.227.055.461.092.705.092c1.654 0 3-1.346 3-3s-1.346-3-3-3s-3 1.346-3 3c0 .679.235 1.298.616 1.801L2.113 26.54A1 1 0 0 0 3 28h7.277c.347.595.985 1 1.723 1a2 2 0 0 0 0-4m-4-8a1.001 1.001 0 0 1 0 2a1 1 0 0 1 0-2m21.887 9.539l-4.04-7.771A2 2 0 1 0 24 20c.075 0 .147-.014.22-.023L27.353 26h-4.537A2.995 2.995 0 0 0 20 24c-1.654 0-3 1.346-3 3s1.346 3 3 3a2.995 2.995 0 0 0 2.816-2H29a1 1 0 0 0 .887-1.462ZM20 28a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2m1-20a3 3 0 0 0-.705.092L16.887 1.54C16.715 1.207 16.357 1 16 1s-.715.207-.887.539L11.22 9.023C11.148 9.014 11.076 9 11 9a2 2 0 1 0 1.846 1.232L16 4.168l2.616 5.03A2.97 2.97 0 0 0 18 11c0 1.654 1.346 3 3 3s3-1.346 3-3s-1.346-3-3-3m0 4a1.001 1.001 0 0 1 0-2a1.001 1.001 0 0 1 0 2"/></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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2025c-.738%200-1.376.405-1.723%201h-5.63l2.648-5.092c.227.055.461.092.705.092c1.654%200%203-1.346%203-3s-1.346-3-3-3s-3%201.346-3%203c0%20.679.235%201.298.616%201.801L2.113%2026.54A1%201%200%200%200%203%2028h7.277c.347.595.985%201%201.723%201a2%202%200%200%200%200-4m-4-8a1.001%201.001%200%200%201%200%202a1%201%200%200%201%200-2m21.887%209.539l-4.04-7.771A2%202%200%201%200%2024%2020c.075%200%20.147-.014.22-.023L27.353%2026h-4.537A2.995%202.995%200%200%200%2020%2024c-1.654%200-3%201.346-3%203s1.346%203%203%203a2.995%202.995%200%200%200%202.816-2H29a1%201%200%200%200%20.887-1.462ZM20%2028a1.001%201.001%200%200%201%200-2a1.001%201.001%200%200%201%200%202m1-20a3%203%200%200%200-.705.092L16.887%201.54C16.715%201.207%2016.357%201%2016%201s-.715.207-.887.539L11.22%209.023C11.148%209.014%2011.076%209%2011%209a2%202%200%201%200%201.846%201.232L16%204.168l2.616%205.03A2.97%202.97%200%200%200%2018%2011c0%201.654%201.346%203%203%203s3-1.346%203-3s-1.346-3-3-3m0%204a1.001%201.001%200%200%201%200-2a1.001%201.001%200%200%201%200%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2025c-.738%200-1.376.405-1.723%201h-5.63l2.648-5.092c.227.055.461.092.705.092c1.654%200%203-1.346%203-3s-1.346-3-3-3s-3%201.346-3%203c0%20.679.235%201.298.616%201.801L2.113%2026.54A1%201%200%200%200%203%2028h7.277c.347.595.985%201%201.723%201a2%202%200%200%200%200-4m-4-8a1.001%201.001%200%200%201%200%202a1%201%200%200%201%200-2m21.887%209.539l-4.04-7.771A2%202%200%201%200%2024%2020c.075%200%20.147-.014.22-.023L27.353%2026h-4.537A2.995%202.995%200%200%200%2020%2024c-1.654%200-3%201.346-3%203s1.346%203%203%203a2.995%202.995%200%200%200%202.816-2H29a1%201%200%200%200%20.887-1.462ZM20%2028a1.001%201.001%200%200%201%200-2a1.001%201.001%200%200%201%200%202m1-20a3%203%200%200%200-.705.092L16.887%201.54C16.715%201.207%2016.357%201%2016%201s-.715.207-.887.539L11.22%209.023C11.148%209.014%2011.076%209%2011%209a2%202%200%201%200%201.846%201.232L16%204.168l2.616%205.03A2.97%202.97%200%200%200%2018%2011c0%201.654%201.346%203%203%203s3-1.346%203-3s-1.346-3-3-3m0%204a1.001%201.001%200%200%201%200-2a1.001%201.001%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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

Process outline icon — Carbon · IconsDB