product icon

product-outlined from Ant Design Icons by HeskeyBaozi · Outlined · MIT Free for personal and commercial use.

Name: product-outlined
Set: Ant Design Icons
Style: Outlined
Viewbox: 1024×1024
License: MIT

1 other variant in Ant Design Icons

The same icon in other sets

Use the product icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" fill-rule="evenodd" d="M464 144c8.837 0 16 7.163 16 16v304c0 8.836-7.163 16-16 16H160c-8.837 0-16-7.164-16-16V160c0-8.837 7.163-16 16-16zm-52 68H212v200h200zm493.333 87.686c6.248 6.248 6.248 16.379 0 22.627l-181.02 181.02c-6.248 6.248-16.378 6.248-22.627 0l-181.019-181.02c-6.248-6.248-6.248-16.379 0-22.627l181.02-181.02c6.248-6.248 16.378-6.248 22.627 0zm-84.853 11.313L713 203.52L605.52 311L713 418.48zM464 544c8.837 0 16 7.164 16 16v304c0 8.837-7.163 16-16 16H160c-8.837 0-16-7.163-16-16V560c0-8.836 7.163-16 16-16zm-52 68H212v200h200zm452-68c8.837 0 16 7.164 16 16v304c0 8.837-7.163 16-16 16H560c-8.837 0-16-7.163-16-16V560c0-8.836 7.163-16 16-16zm-52 68H612v200h200z"/></svg>

React

import type { SVGProps } from "react";

export function AntDesignProductOutlined(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" fillRule="evenodd" d="M464 144c8.837 0 16 7.163 16 16v304c0 8.836-7.163 16-16 16H160c-8.837 0-16-7.164-16-16V160c0-8.837 7.163-16 16-16zm-52 68H212v200h200zm493.333 87.686c6.248 6.248 6.248 16.379 0 22.627l-181.02 181.02c-6.248 6.248-16.378 6.248-22.627 0l-181.019-181.02c-6.248-6.248-6.248-16.379 0-22.627l181.02-181.02c6.248-6.248 16.378-6.248 22.627 0zm-84.853 11.313L713 203.52L605.52 311L713 418.48zM464 544c8.837 0 16 7.164 16 16v304c0 8.837-7.163 16-16 16H160c-8.837 0-16-7.163-16-16V560c0-8.836 7.163-16 16-16zm-52 68H212v200h200zm452-68c8.837 0 16 7.164 16 16v304c0 8.837-7.163 16-16 16H560c-8.837 0-16-7.163-16-16V560c0-8.836 7.163-16 16-16zm-52 68H612v200h200z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" fill-rule="evenodd" d="M464 144c8.837 0 16 7.163 16 16v304c0 8.836-7.163 16-16 16H160c-8.837 0-16-7.164-16-16V160c0-8.837 7.163-16 16-16zm-52 68H212v200h200zm493.333 87.686c6.248 6.248 6.248 16.379 0 22.627l-181.02 181.02c-6.248 6.248-16.378 6.248-22.627 0l-181.019-181.02c-6.248-6.248-6.248-16.379 0-22.627l181.02-181.02c6.248-6.248 16.378-6.248 22.627 0zm-84.853 11.313L713 203.52L605.52 311L713 418.48zM464 544c8.837 0 16 7.164 16 16v304c0 8.837-7.163 16-16 16H160c-8.837 0-16-7.163-16-16V560c0-8.836 7.163-16 16-16zm-52 68H212v200h200zm452-68c8.837 0 16 7.164 16 16v304c0 8.837-7.163 16-16 16H560c-8.837 0-16-7.163-16-16V560c0-8.836 7.163-16 16-16zm-52 68H612v200h200z"/></svg>
</template>

CSS

.icon-product-outlined {
  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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M464%20144c8.837%200%2016%207.163%2016%2016v304c0%208.836-7.163%2016-16%2016H160c-8.837%200-16-7.164-16-16V160c0-8.837%207.163-16%2016-16zm-52%2068H212v200h200zm493.333%2087.686c6.248%206.248%206.248%2016.379%200%2022.627l-181.02%20181.02c-6.248%206.248-16.378%206.248-22.627%200l-181.019-181.02c-6.248-6.248-6.248-16.379%200-22.627l181.02-181.02c6.248-6.248%2016.378-6.248%2022.627%200zm-84.853%2011.313L713%20203.52L605.52%20311L713%20418.48zM464%20544c8.837%200%2016%207.164%2016%2016v304c0%208.837-7.163%2016-16%2016H160c-8.837%200-16-7.163-16-16V560c0-8.836%207.163-16%2016-16zm-52%2068H212v200h200zm452-68c8.837%200%2016%207.164%2016%2016v304c0%208.837-7.163%2016-16%2016H560c-8.837%200-16-7.163-16-16V560c0-8.836%207.163-16%2016-16zm-52%2068H612v200h200z%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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M464%20144c8.837%200%2016%207.163%2016%2016v304c0%208.836-7.163%2016-16%2016H160c-8.837%200-16-7.164-16-16V160c0-8.837%207.163-16%2016-16zm-52%2068H212v200h200zm493.333%2087.686c6.248%206.248%206.248%2016.379%200%2022.627l-181.02%20181.02c-6.248%206.248-16.378%206.248-22.627%200l-181.019-181.02c-6.248-6.248-6.248-16.379%200-22.627l181.02-181.02c6.248-6.248%2016.378-6.248%2022.627%200zm-84.853%2011.313L713%20203.52L605.52%20311L713%20418.48zM464%20544c8.837%200%2016%207.164%2016%2016v304c0%208.837-7.163%2016-16%2016H160c-8.837%200-16-7.163-16-16V560c0-8.836%207.163-16%2016-16zm-52%2068H212v200h200zm452-68c8.837%200%2016%207.164%2016%2016v304c0%208.837-7.163%2016-16%2016H560c-8.837%200-16-7.163-16-16V560c0-8.836%207.163-16%2016-16zm-52%2068H612v200h200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ant-design/product-outlined.svg?color=%231a73e8&size=48