Backpack icon

Use the Backpack 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 { Backpack24Regular, Backpack24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Backpack24Regular aria-label="Backpack" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_backpack_24_regular.svg" width="24" height="24" alt="Backpack">

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="M10.4167 8C9.08198 8 8 9.08198 8 10.4167C8 11.2911 8.70888 12 9.58333 12H14.4167C15.2911 12 16 11.2911 16 10.4167C16 9.08198 14.918 8 13.5833 8H10.4167ZM9.5 10.4167C9.5 9.91041 9.91041 9.5 10.4167 9.5H13.5833C14.0896 9.5 14.5 9.91041 14.5 10.4167C14.5 10.4627 14.4627 10.5 14.4167 10.5H9.58333C9.53731 10.5 9.5 10.4627 9.5 10.4167ZM12 2C10.0387 2 8.4291 3.50566 8.26396 5.42415C5.72794 6.76594 4 9.43118 4 12.5V18.75C4 20.5449 5.45507 22 7.25 22H16.75C18.5449 22 20 20.5449 20 18.75V12.5C20 9.43118 18.2721 6.76594 15.736 5.42415C15.5709 3.50566 13.9613 2 12 2ZM18.5 14H5.5V12.5C5.5 8.91015 8.41015 6 12 6C15.5899 6 18.5 8.91015 18.5 12.5V14ZM8 17.25C8 17.6642 8.33579 18 8.75 18C9.16421 18 9.5 17.6642 9.5 17.25V15.7143H18.5V18.75C18.5 19.7165 17.7165 20.5 16.75 20.5H7.25C6.2835 20.5 5.5 19.7165 5.5 18.75V15.7143H8V17.25ZM12 4.5C11.3023 4.5 10.6255 4.58931 9.98036 4.75712C10.3472 4.0124 11.1137 3.5 12 3.5C12.8863 3.5 13.6528 4.0124 14.0196 4.75712C13.3745 4.58931 12.6977 4.5 12 4.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/backpack_24_regular.svg";

Details

Keywords

schooltraveleducation