Shopping Bag Arrow Left icon

Use the Shopping Bag Arrow Left icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { ShoppingBagArrowLeft24Regular, ShoppingBagArrowLeft24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ShoppingBagArrowLeft24Regular aria-label="Shopping Bag Arrow Left" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_shopping_bag_arrow_left_24_regular.svg" width="24" height="24" alt="Shopping Bag Arrow Left">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.0001 17.5C23.0001 14.4624 20.5377 12 17.5001 12C14.4625 12 12.0001 14.4624 12.0001 17.5C12.0001 20.5376 14.4625 23 17.5001 23C20.5377 23 23.0001 20.5376 23.0001 17.5ZM16.6501 14.6464L16.7193 14.5886C16.9142 14.4536 17.1836 14.4729 17.3572 14.6464L17.415 14.7157C17.55 14.9106 17.5307 15.18 17.3572 15.3536L15.7111 17H20.5001L20.59 17.0081C20.8232 17.0504 21.0001 17.2545 21.0001 17.5L20.992 17.5899C20.9497 17.8231 20.7456 18 20.5001 18H15.7111L17.3572 19.6464L17.415 19.7157C17.55 19.9106 17.5307 20.18 17.3572 20.3536C17.1619 20.5488 16.8453 20.5488 16.6501 20.3536L14.1343 17.8371L14.0834 17.7711L14.0496 17.7098L14.0206 17.6296L14.0056 17.5443L14.0079 17.4341L14.0269 17.3488L14.0496 17.2901L14.0938 17.2134L14.1345 17.1628L16.6501 14.6464ZM7 7V5C7 3.34315 8.34315 2 10 2C10.7684 2 11.4692 2.28886 12 2.7639C12.5308 2.28885 13.2317 2 14 2C15.6569 2 17 3.34315 17 5V7H18.5C19.3284 7 20 7.67157 20 8.5V11.4982C19.5258 11.3004 19.0232 11.1572 18.5 11.0764V8.5H14.5V11.7322C13.949 12.0194 13.4443 12.3832 13 12.8096V8.5H5.5V18C5.5 19.3807 6.61929 20.5 8 20.5H11.7322C12.0194 21.051 12.3832 21.5557 12.8096 22H8C5.79086 22 4 20.2091 4 18V8.5C4 7.67157 4.67157 7 5.5 7H7ZM10 3.5C9.17157 3.5 8.5 4.17157 8.5 5V7H11.5V5C11.5 4.17157 10.8284 3.5 10 3.5ZM15.5 7V5C15.5 4.17157 14.8284 3.5 14 3.5C13.535 3.5 13.1195 3.71156 12.8444 4.04368C12.9453 4.34403 13 4.66563 13 5V7H15.5Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/shopping_bag_arrow_left_24_regular.svg";

Details

Keywords

collectionpurchaseretailcartonlinecurrencyproduct