backpack icon

backpack from Radix Icons by WorkOS · Outline · MIT Free for personal and commercial use.

Name
backpack
Set
Radix Icons
Style
Outline
Viewbox
15×15
License
MIT

The same icon in other sets

backpackBootstrap IconsbackpackBoxIcons v2 SolidbackpackEmoji One (Colored)backpack-12-filledFluent UI System IconsbackpackFluent EmojibackpackFluent Emoji FlatbackpackFluent Emoji High ContrastbackpackIconParkbackpackIconPark OutlinebackpackIconPark SolidbackpackIconPark TwoTonebackpackJam IconsbackpackLucidebackpackMaterial SymbolsbackpackMaterial Symbols Lightbackpack-fillMingCute IconbackpackMyna UI IconsbackpackNoto EmojibackpackOpenMojibackpackPhosphorbackpackPixelarticonsbackpack-boldSolarbackpackTabler IconsbackpackWeb3 Icons

Use the backpack icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M9 0a1 1 0 0 1 1 1v1h4a1 1 0 0 1 1 1v3a3 3 0 0 1-1 2.234V11.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 1 11.5V8.233A3 3 0 0 1 0 6V3a1 1 0 0 1 1-1h4V1a1 1 0 0 1 1-1zm4 8.827c-.313.11-.65.173-1 .173H8v.5a.5.5 0 0 1-1 0V9H3c-.35 0-.687-.062-1-.173V11.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5zM1 6c0 .654.313 1.235.8 1.6l.13.09c.31.196.676.31 1.07.31h4v-.5a.5.5 0 0 1 1 0V8h4c.45 0 .866-.148 1.2-.4l.174-.147C13.76 7.088 14 6.573 14 6V3H1zm5-4h3V1H6z"/></svg>

React

import type { SVGProps } from "react";

export function RadixIconsBackpack(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M9 0a1 1 0 0 1 1 1v1h4a1 1 0 0 1 1 1v3a3 3 0 0 1-1 2.234V11.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 1 11.5V8.233A3 3 0 0 1 0 6V3a1 1 0 0 1 1-1h4V1a1 1 0 0 1 1-1zm4 8.827c-.313.11-.65.173-1 .173H8v.5a.5.5 0 0 1-1 0V9H3c-.35 0-.687-.062-1-.173V11.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5zM1 6c0 .654.313 1.235.8 1.6l.13.09c.31.196.676.31 1.07.31h4v-.5a.5.5 0 0 1 1 0V8h4c.45 0 .866-.148 1.2-.4l.174-.147C13.76 7.088 14 6.573 14 6V3H1zm5-4h3V1H6z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M9 0a1 1 0 0 1 1 1v1h4a1 1 0 0 1 1 1v3a3 3 0 0 1-1 2.234V11.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 1 11.5V8.233A3 3 0 0 1 0 6V3a1 1 0 0 1 1-1h4V1a1 1 0 0 1 1-1zm4 8.827c-.313.11-.65.173-1 .173H8v.5a.5.5 0 0 1-1 0V9H3c-.35 0-.687-.062-1-.173V11.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5zM1 6c0 .654.313 1.235.8 1.6l.13.09c.31.196.676.31 1.07.31h4v-.5a.5.5 0 0 1 1 0V8h4c.45 0 .866-.148 1.2-.4l.174-.147C13.76 7.088 14 6.573 14 6V3H1zm5-4h3V1H6z"/></svg>
</template>

CSS

.icon-backpack {
  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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%200a1%201%200%200%201%201%201v1h4a1%201%200%200%201%201%201v3a3%203%200%200%201-1%202.234V11.5a1.5%201.5%200%200%201-1.5%201.5h-10A1.5%201.5%200%200%201%201%2011.5V8.233A3%203%200%200%201%200%206V3a1%201%200%200%201%201-1h4V1a1%201%200%200%201%201-1zm4%208.827c-.313.11-.65.173-1%20.173H8v.5a.5.5%200%200%201-1%200V9H3c-.35%200-.687-.062-1-.173V11.5a.5.5%200%200%200%20.5.5h10a.5.5%200%200%200%20.5-.5zM1%206c0%20.654.313%201.235.8%201.6l.13.09c.31.196.676.31%201.07.31h4v-.5a.5.5%200%200%201%201%200V8h4c.45%200%20.866-.148%201.2-.4l.174-.147C13.76%207.088%2014%206.573%2014%206V3H1zm5-4h3V1H6z%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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%200a1%201%200%200%201%201%201v1h4a1%201%200%200%201%201%201v3a3%203%200%200%201-1%202.234V11.5a1.5%201.5%200%200%201-1.5%201.5h-10A1.5%201.5%200%200%201%201%2011.5V8.233A3%203%200%200%201%200%206V3a1%201%200%200%201%201-1h4V1a1%201%200%200%201%201-1zm4%208.827c-.313.11-.65.173-1%20.173H8v.5a.5.5%200%200%201-1%200V9H3c-.35%200-.687-.062-1-.173V11.5a.5.5%200%200%200%20.5.5h10a.5.5%200%200%200%20.5-.5zM1%206c0%20.654.313%201.235.8%201.6l.13.09c.31.196.676.31%201.07.31h4v-.5a.5.5%200%200%201%201%200V8h4c.45%200%20.866-.148%201.2-.4l.174-.147C13.76%207.088%2014%206.573%2014%206V3H1zm5-4h3V1H6z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/radix-icons/backpack.svg?color=%231a73e8&size=48