Add icons to this collection by clicking the heart icon.
Add To Cart icon - also known as add, basket, shopping basket, commerce and shopping, add to cart, and shapes and symbols. Created in a clean color style with a white finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
viewBox="0 0 512 512"
>
<linearGradient
id="a"
x1="254.809"
x2="254.809"
y1="145.954"
y2="2.345"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff4c54" />
<stop offset="1" stop-color="#be3f45" />
</linearGradient>
<path
d="M400.786 495.374H111.214c-12.419 0-23.115-8.756-25.568-20.93L35.811 227.105h440.378l-49.836 247.338c-2.452 12.174-13.148 20.931-25.567 20.931z"
fill="url(#a)"
/>
<linearGradient
id="b"
x1="369.902"
x2="425.162"
y1="154.594"
y2="10.984"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff4c54" />
<stop offset="1" stop-color="#be3f45" />
</linearGradient>
<path
d="M365.388 467.022c-.808 0-1.625-.059-2.448-.183-8.934-1.341-15.09-9.671-13.749-18.605l22.748-151.582c1.341-8.935 9.672-15.092 18.605-13.749 8.934 1.341 15.09 9.671 13.749 18.605L381.545 453.09c-1.217 8.111-8.196 13.932-16.157 13.932z"
fill="url(#b)"
/>
<linearGradient
id="c"
x1="129.363"
x2="184.613"
y1="154.593"
y2="10.983"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff4c54" />
<stop offset="1" stop-color="#be3f45" />
</linearGradient>
<path
d="M146.612 467.022c-7.962 0-14.939-5.821-16.156-13.932l-22.748-151.582c-1.341-8.934 4.815-17.263 13.749-18.605 8.932-1.34 17.264 4.815 18.605 13.749l22.748 151.582c1.341 8.934-4.815 17.263-13.749 18.605-.824.124-1.642.183-2.449.183z"
fill="url(#c)"
/>
<linearGradient
id="d"
x1="293.106"
x2="333.416"
y1="150.846"
y2="7.236"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff4c54" />
<stop offset="1" stop-color="#be3f45" />
</linearGradient>
<path
d="M293.321 467.02c-.282 0-.565-.007-.849-.022-9.022-.462-15.962-8.15-15.502-17.172l7.753-151.582c.461-9.022 8.164-15.945 17.172-15.501 9.022.462 15.962 8.15 15.501 17.172l-7.753 151.582c-.446 8.738-7.672 15.523-16.322 15.523z"
fill="url(#d)"
/>
<linearGradient
id="e"
x1="211.061"
x2="251.371"
y1="150.848"
y2="7.238"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff4c54" />
<stop offset="1" stop-color="#be3f45" />
</linearGradient>
<path
d="M218.679 467.02c-8.651 0-15.876-6.784-16.323-15.523l-7.753-151.582c-.462-9.022 6.478-16.71 15.502-17.172 9.021-.458 16.711 6.478 17.172 15.501l7.753 151.582c.462 9.022-6.478 16.71-15.502 17.172-.283.015-.568.022-.849.022z"
fill="url(#e)"
/>
<linearGradient
id="f"
x1="254.809"
x2="254.809"
y1="64.924"
y2="401.404"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#be3f45" stop-opacity="0" />
<stop offset="1" stop-color="#be3f45" />
</linearGradient>
<path
d="m43.54 265.465 229.908 229.908h127.337c12.419 0 23.115-8.756 25.568-20.93l49.836-247.338H35.811l7.729 38.36z"
fill="url(#f)"
/>
<linearGradient
id="g"
x1="254.809"
x2="254.809"
y1="305.675"
y2="228.204"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffb92d" />
<stop offset="1" stop-color="#f59500" />
</linearGradient>
<path
d="M471.105 265.273H40.895C18.31 265.273 0 246.964 0 224.379c0-22.585 18.31-40.895 40.895-40.895h430.211c22.585 0 40.895 18.31 40.895 40.895-.001 22.585-18.311 40.894-40.896 40.894z"
fill="url(#g)"
/>
<linearGradient
id="h"
x1="122.269"
x2="73.539"
y1="283.995"
y2="332.724"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffb92d" />
<stop offset="1" stop-color="#f59500" />
</linearGradient>
<circle cx="115.863" cy="224.378" r="33.26" fill="url(#h)" />
<linearGradient
id="i"
x1="109.208"
x2="150.758"
y1="297.054"
y2="255.514"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f2f2f2" />
<stop offset="1" stop-color="#c3c3c3" />
</linearGradient>
<circle cx="115.863" cy="224.378" r="28.351" fill="url(#i)" />
<linearGradient
id="j"
x1="182.989"
x2="26.739"
y1="249.875"
y2="406.125"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#be3f45" stop-opacity="0" />
<stop offset="1" stop-color="#be3f45" />
</linearGradient>
<path
d="M153.491 183.484h-36.299l-6.415 13.006-10.645 21.582c-3.295 6.68-1.6 14.512 3.634 19.297l27.904 27.904h103.609l-81.788-81.789z"
fill="url(#j)"
/>
<linearGradient
id="k"
x1="160.197"
x2="103.017"
y1="253.533"
y2="310.713"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#c3c3c3" stop-opacity="0" />
<stop offset="1" stop-color="#777" />
</linearGradient>
<path
d="m103.766 237.369 15.192 15.192c14.203-1.542 25.261-13.569 25.261-28.183 0-15.659-12.695-28.354-28.354-28.354-1.738 0-3.437.165-5.089.465l-10.645 21.582c-3.293 6.681-1.598 14.512 3.635 19.298z"
fill="url(#k)"
/>
<linearGradient
id="l"
x1="151.358"
x2="175.528"
y1="391.603"
y2="377.883"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fff465" />
<stop offset="1" stop-color="#ffe600" />
</linearGradient>
<path
d="M114.791 241.669a16.27 16.27 0 0 1-7.223-1.692c-8.103-3.996-11.432-13.804-7.436-21.906L194.98 25.756c3.997-8.103 13.804-11.433 21.907-7.435 8.103 3.996 11.432 13.804 7.435 21.906l-94.847 192.315c-2.849 5.776-8.651 9.127-14.684 9.127z"
fill="url(#l)"
/>
<linearGradient
id="m"
x1="387.349"
x2="436.079"
y1="283.995"
y2="332.724"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffb92d" />
<stop offset="1" stop-color="#f59500" />
</linearGradient>
<circle cx="396.137" cy="224.378" r="33.26" fill="url(#m)" />
<linearGradient
id="n"
x1="441.048"
x2="304.148"
y1="252.904"
y2="389.804"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#be3f45" stop-opacity="0" />
<stop offset="1" stop-color="#be3f45" />
</linearGradient>
<path
d="m476.275 264.936-57.171-57.17a28.494 28.494 0 0 0-6.358-6.358l-17.924-17.924h-36.878l13.597 26.789 10.983 22.27a16.278 16.278 0 0 0 3.974 5.133l27.598 27.598h57.009a41.388 41.388 0 0 0 5.17-.338z"
fill="url(#n)"
/>
<linearGradient
id="o"
x1="400.409"
x2="358.859"
y1="297.054"
y2="255.514"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f2f2f2" />
<stop offset="1" stop-color="#c3c3c3" />
</linearGradient>
<circle cx="396.137" cy="224.378" r="28.351" fill="url(#o)" />
<linearGradient
id="p"
x1="434.675"
x2="375.995"
y1="259.281"
y2="317.961"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#c3c3c3" stop-opacity="0" />
<stop offset="1" stop-color="#777" />
</linearGradient>
<path
d="M424.487 224.379c0-15.659-12.695-28.354-28.354-28.354-10.522 0-19.698 5.736-24.591 14.248l10.983 22.27a16.278 16.278 0 0 0 3.974 5.133l14.612 14.612c13.285-2.354 23.376-13.949 23.376-27.909z"
fill="url(#p)"
/>
<linearGradient
id="q"
x1="358.259"
x2="334.089"
y1="391.603"
y2="377.883"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffe600" />
<stop offset="1" stop-color="#fff465" />
</linearGradient>
<path
d="M397.209 241.669c2.431 0 4.896-.543 7.223-1.692 8.103-3.996 11.432-13.804 7.436-21.906L317.02 25.756c-3.997-8.103-13.804-11.433-21.907-7.435-8.103 3.996-11.432 13.804-7.435 21.906l94.848 192.315c2.848 5.776 8.65 9.127 14.683 9.127z"
fill="url(#q)"
/>
<linearGradient
id="r"
x1="404.911"
x2="551.931"
y1="465.7"
y2="318.687"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#a7f3ce" />
<stop offset="1" stop-color="#61db99" />
</linearGradient>
<circle cx="443.141" cy="85.485" r="68.859" fill="url(#r)" />
<linearGradient
id="s"
x1="488.211"
x2="411.391"
y1="382.407"
y2="459.217"
gradientTransform="matrix(1.0039 0 0 -1.0039 .192 516.564)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#61db99" stop-opacity="0" />
<stop offset="1" stop-color="#009e74" />
</linearGradient>
<path
d="m508.54 107.088-54.179-55.427h-22.44v22.607h-22.607v22.44l54.649 54.431c21.023-6.661 37.674-23.138 44.577-44.051z"
fill="url(#s)"
/>
<path
d="M476.968 74.269h-22.607V51.661h-22.44v22.608h-22.607v22.439h22.607v22.608h22.44V96.708h22.607z"
fill="#fff"
/>
</svg>
More icons in the same style and category