E-commerce icon

Staples JSX Icon

Q: Is the Staples JSX icon free?

Yes. You can copy the Staples JSX component and use it in React and Next.js projects.

Q: Can I customize the Staples icon?

Yes. Edit SVG attributes or pass className, width, height and color props depending on the component.

Copy the Staples icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.

Browse all icons

ComponentStaplesLogo

FilestaplesLogo.jsx

CategoryE-commerce

Copy-ready code

Staples React JSX component

// Source: https://raw.githubusercontent.com/glincker/thesvg/bc1ea3c9c5901d1d7a9438e760a9d071955ff29d/public/icons/staples/default.svg
// Asset license: MIT License
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const StaplesLogo = ({ width = "40px", height = "40px", color = "#CC0000", ...props }) => (
  <svg {...props} width={width} height={height} viewBox="0 0 184.201 38.9" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
    <path fill="currentColor" d="M169.274.92c-4.254.008-7.513 1.118-9.682 3.3-2.516 2.537-2.878 5.79-2.87 7.505.017 7.745 5.017 8.986 10.313 10.302l3.526.862c3.565.905 5.733 1.632 5.748 4.132-.005 3.583-3.505 4.338-6.442 4.338h-.297c-5.598 0-6.508-3.417-6.554-5.455l-.007-.15h-6.76v.205c.006 3.512 1.377 11.687 13.917 11.687h.066c2.144-.006 12.853-.583 12.84-11.492-.011-6.351-4.335-8.321-8.562-9.41l-7.893-2.07c-1.592-.401-3.292-1.034-3.307-3.479.015-2.94 2.824-3.988 5.473-3.988 3.973.013 6.135 1.709 6.438 5.049l.01.14 6.788-.003-.004-.156C181.932 7.017 178.55.92 169.273.92zm-56.963.117c-3.653-.001-6.606 2.87-6.61 6.381v25.503c-.004 1.896 1.58 3.933 3.528 3.943.358-.04.691 0 .691 0h18.313v-6.512h-15.895V7.425l.266-.012 2.369 12.084 5.945-1.427L119.07 7.3c-.233-3.607-3.07-6.254-6.76-6.262zm-98.441.049c-4.215 0-7.451 1.1-9.617 3.274-2.54 2.545-2.91 5.817-2.905 7.54.029 7.74 5.068 8.97 10.4 10.278l3.466.889c3.447.845 5.708 1.59 5.71 4.146.004 1.113-.34 2.024-1.019 2.709-1.05 1.056-2.963 1.618-5.535 1.623-5.965-.022-6.677-3.824-6.705-5.457l-.004-.152-6.79-.01v.154C.9 29.606 2.318 37.807 14.867 37.82c2.15-.011 12.873-.62 12.863-11.478-.025-6.363-4.137-8.31-8.578-9.467l-7.883-2.09c-1.313-.32-3.302-.805-3.322-3.433.01-2.928 2.793-3.973 5.397-3.973h.066c5.903.004 6.321 3.79 6.475 5.162h6.773c-.015-1.155-.49-11.455-12.716-11.455zm13.222.777L27.075 8.4h9.757v28.463h7.092V8.4h9.71l-.028-6.537zm31.303 0-11.526 35h7.43l2.256-7.172h11.68l2.053 7.172h7.668l-11.49-35h-8.071zm20.781 0v35h7.1V24.37l7.595-.025c2.972-.008 5.39-.933 7.186-2.744 2.404-2.422 3.24-6.073 3.228-8.463-.026-6.914-3.934-11.274-10.212-11.274zm50.393 0v35h24.865V30.33h-17.92v-8.633h15.738v-6.445l-15.738.016v-6.98h17.11l-.005-6.425h-24.052zM86.276 8.215h5.238c4.064 0 5.722 1.336 5.727 4.613.009.89.034 2.747-1.193 3.988-.81.82-2.044 1.237-3.68 1.237l-6.092.007zm-23.909 2.097 3.88 13.13h-7.831z"/>
  </svg>
)

How to use the Staples icon

import { StaplesLogo } from "@/assets/icons/staplesLogo"

export default function Example() {
  return <StaplesLogo width="32px" height="32px" />
}

Built for the web

Use it in your stack

This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.

ReactNext.jsJSXSVGE-commerce icons

Looking for a similar mark? Browse the related icons below or explore the full e-commerce collection.

Related JSX icons

7-Eleven

Albert Heijn

Aldi Nord

Aldi Süd

Alibaba.com

Allegro

Argos

ASDA

FAQ

Is the Staples JSX icon free?

Yes. You can copy the JSX component and use it in React and Next.js projects.

Can I customize it?

Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.