Shopping Bag Percent icon

Use the Shopping Bag Percent 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 { ShoppingBagPercent24Regular, ShoppingBagPercent24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ShoppingBagPercent24Regular aria-label="Shopping Bag Percent" />;
}

Use it in HTML

Reference the SVG file directly:

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

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="M17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM14 2C15.6569 2 17 3.34315 17 5V7H18.5C19.3284 7 20 7.67157 20 8.5V11.498C19.5258 11.3003 19.0232 11.157 18.5 11.0762V8.5H14.5V11.7324C13.949 12.0196 13.4442 12.3833 13 12.8096V8.5H5.5V18C5.5 19.3807 6.61929 20.5 8 20.5H11.7324C12.0196 21.051 12.3833 21.5558 12.8096 22H8C5.79086 22 4 20.2091 4 18V8.5C4 7.67157 4.67157 7 5.5 7H7V5C7 3.34315 8.34315 2 10 2C10.7683 2 11.4693 2.28869 12 2.76367C12.5307 2.28869 13.2317 2 14 2ZM20 17.5C19.1716 17.5 18.5 18.1716 18.5 19C18.5 19.8284 19.1716 20.5 20 20.5C20.8284 20.5 21.5 19.8284 21.5 19C21.5 18.1716 20.8284 17.5 20 17.5ZM20.3301 14.6719C20.1348 14.4766 19.8183 14.4766 19.623 14.6719L14.6729 19.6221C14.478 19.8174 14.4777 20.134 14.6729 20.3291C14.868 20.5242 15.1846 20.5239 15.3799 20.3291L20.3301 15.3789C20.5253 15.1836 20.5253 14.8671 20.3301 14.6719ZM20 18.5C20.2761 18.5 20.5 18.7239 20.5 19C20.5 19.2761 20.2761 19.5 20 19.5C19.7239 19.5 19.5 19.2761 19.5 19C19.5 18.7239 19.7239 18.5 20 18.5ZM15 14.5C14.1716 14.5 13.5 15.1716 13.5 16C13.5 16.8284 14.1716 17.5 15 17.5C15.8284 17.5 16.5 16.8284 16.5 16C16.5 15.1716 15.8284 14.5 15 14.5ZM15 15.5C15.2761 15.5 15.5 15.7239 15.5 16C15.5 16.2761 15.2761 16.5 15 16.5C14.7239 16.5 14.5 16.2761 14.5 16C14.5 15.7239 14.7239 15.5 15 15.5ZM10 3.5C9.17157 3.5 8.5 4.17157 8.5 5V7H11.5V5C11.5 4.17157 10.8284 3.5 10 3.5ZM14 3.5C13.535 3.5 13.1199 3.71185 12.8447 4.04395C12.9456 4.3442 13 4.66576 13 5V7H15.5V5C15.5 4.17157 14.8284 3.5 14 3.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_percent_24_regular.svg";

Details

Keywords

collectionpurchaseretailcartonlinecurrencyproduct