Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: nudge-left. Pick another to preview it and update the animated code:

Radix Icons · RxBackpack

Backpack icon

A free backpack icon from Radix Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License
MIT license
Project
icons.radix-ui.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/backpack.json
components/icons/radix-backpack.tsx
import * as React from "react";

/**
 * Backpack from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/backpack. Sized in em, colored by currentColor.
 */
export function RxBackpackIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 15 15"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M9 0C9.55229 0 10 0.447715 10 1V2H14C14.5523 2 15 2.44772 15 3V6C15 6.88839 14.6126 7.68566 14 8.23438V11.5C14 12.3284 13.3284 13 12.5 13H2.5C1.67157 13 1 12.3284 1 11.5V8.2334C0.387691 7.68474 0 6.88823 0 6V3C0 2.44772 0.447715 2 1 2H5V1C5 0.447715 5.44772 0 6 0H9ZM13 8.82715C12.6869 8.93792 12.3506 9 12 9H8V9.5C8 9.77614 7.77614 10 7.5 10C7.22386 10 7 9.77614 7 9.5V9H3C2.64938 9 2.31309 8.93795 2 8.82715V11.5C2 11.7761 2.22386 12 2.5 12H12.5C12.7761 12 13 11.7761 13 11.5V8.82715ZM1 6C1 6.65391 1.31294 7.23483 1.7998 7.60059L1.92969 7.68945C2.23914 7.88604 2.60573 8 3 8H7V7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5V8H12C12.4508 8 12.866 7.85163 13.2002 7.60059L13.374 7.45312C13.7601 7.08804 14 6.57214 14 6V3H1V6ZM6 2H9V1H6V2Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxBackpack } from "react-icons/rx";

export function Example() {
  return <RxBackpack className="size-5" />;
}
backpack.svg
<svg
  fill="none"
  viewBox="0 0 15 15"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M9 0C9.55229 0 10 0.447715 10 1V2H14C14.5523 2 15 2.44772 15 3V6C15 6.88839 14.6126 7.68566 14 8.23438V11.5C14 12.3284 13.3284 13 12.5 13H2.5C1.67157 13 1 12.3284 1 11.5V8.2334C0.387691 7.68474 0 6.88823 0 6V3C0 2.44772 0.447715 2 1 2H5V1C5 0.447715 5.44772 0 6 0H9ZM13 8.82715C12.6869 8.93792 12.3506 9 12 9H8V9.5C8 9.77614 7.77614 10 7.5 10C7.22386 10 7 9.77614 7 9.5V9H3C2.64938 9 2.31309 8.93795 2 8.82715V11.5C2 11.7761 2.22386 12 2.5 12H12.5C12.7761 12 13 11.7761 13 11.5V8.82715ZM1 6C1 6.65391 1.31294 7.23483 1.7998 7.60059L1.92969 7.68945C2.23914 7.88604 2.60573 8 3 8H7V7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5V8H12C12.4508 8 12.866 7.85163 13.2002 7.60059L13.374 7.45312C13.7601 7.08804 14 6.57214 14 6V3H1V6ZM6 2H9V1H6V2Z"
    fill="currentColor"
  />
</svg>
Attribution
"Backpack" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Backpack icon in other sets