E-commerce icon

Trader Joe's JSX Icon

Q: Is the Trader Joe's JSX icon free?

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

Q: Can I customize the Trader Joe's icon?

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

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

Browse all icons

ComponentTraderJoesLogo

FiletraderjoesLogo.jsx

CategoryE-commerce

Copy-ready code

Trader Joe's React JSX component

// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1207720457
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const TraderJoesLogo = ({ width = "40px", height = "40px", color = "#C8102E", ...props }) => (
  <svg {...props} width={width} height={height} viewBox="0 0 400 60" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
    <g><path d="M16.762 12.077H37.05l6.086 16.907c-2.638-1.893-5.41-5.41-6.764-6.762-1.418-1.42-3.38-.677-3.38-.677-4.734 2.705-1.353 14.878 3.38 28.403H16.762c5.41-12.173 6.763-22.317 6.086-25.023 0 0-.593-2.826-2.028-3.38-1.254-.485-3.38.677-3.38.677-2.706 2.028-4.06 4.056-7.44 6.762zM335.962 49.948h-26.376c0-1.014 4.059-8.927 4.059-17.584 0-9.264-4.059-19.34-4.059-20.287h26.376l2.705 12.173c-2.502-.068-14.473-7.1-16.906-4.734-4.465 4.262-3.72 9.4 6.762 6.762v7.439c-.676 0-7.238-2.57-8.115-.675-.88 1.96-1.757 10.076 2.704 9.467 4.735-.676 12.242-5.951 15.555-6.087zM179.067 49.948h-26.375c0-1.014 4.058-8.927 4.058-17.584 0-9.264-4.058-19.34-4.058-20.287h26.375l2.706 12.173c-2.502-.068-14.472-7.1-16.908-4.734-4.461 4.262-3.718 9.4 6.763 6.762v7.439c-.677 0-7.236-2.57-8.114-.675-.88 1.96-1.76 10.076 2.703 9.467 4.734-.676 12.243-5.951 15.556-6.087zM250.753 12.077h24.345c0 .54-9.467 4.059-8.792 20.287.339 9.334-2.502 13.39-8.79 16.909-3.113 1.69-7.642 1.556-10.821-.678-1.825-1.285-3.248-3.516-4.734-6.086-2.03-3.38-7.44-4.734-7.44-4.734 2.029-.81 14.202-7.439 16.232-8.116-8.117 7.441 2.906 11.294 5.409 8.116 8.114-10.144-1.353-22.992-5.41-25.698M382.56 12.777c1.352 1.353 6.087-1.217 7.44-.675L382.56 26.3c.204-2.637-1.352-5.408-2.027-6.084-.407-.406-1.353-2.03-4.736-2.03-2.568 0-4.598.474-5.409 2.03-1.35 2.704 0 6.49 4.736 7.437 3.38.676 8.788 4.734 8.788 11.495 0 8.993-4.732 10.818-12.171 10.818-8.114 0-6.76-.675-11.495-1.35-1.35.675-4.056 2.161-6.085 1.35l5.41-15.551c.878.068 1.623 8.114 6.084 8.114 2.03 0 5.544-2.77 3.383-5.409-3.383-4.058-4.057-2.03-8.115-6.086-1.22-1.217-2.703-3.38-2.909-8.047-.133-3.717 2.5-7.64 5.613-9.535 6.49-3.92 18.055-.675 18.934-.675M348.076 26.301l1.352-5.409s-8.79-6.086-2.703-10.82c1.35-1.014 5.409-1.35 8.112 2.028 3.652 4.598-6.761 14.201-6.761 14.201M55.985 17.488s8.115-.678 7.44 6.086c-.272 2.839-6.087 5.409-7.44 5.409 0 0 .678-2.771.678-5.409 0-2.367-.678-6.086-.678-6.086m-12.848-5.411h25.698c2.704.677 4.599 5.004 4.059 8.792-.61 4.598-6.087 8.791-6.087 8.791.134.947 1.825 6.898 4.056 10.82 2.704 4.734 5.951 7.575 6.087 9.467H63.424c0-1.15 2.029-4.733-.675-11.495-1.082-2.84-3.383-4.733-3.383-4.733-1.353-2.03-3.38-.678-3.38-.678-2.704 1.353-.676 12.85 2.705 16.906H43.137c3.381-3.38 5.41-16.906 5.41-16.906 1.352-16.23-5.41-19.072-5.41-20.964M95.886 21.545c2.706 10.145 6.087 10.82 4.734 10.82h-8.792s1.895-3.194 2.706-5.41c.745-2.044 1.352-5.41 1.352-5.41m20.29 28.403h-12.853c0-.61-1.687-8.184-4.056-11.497-1.488-2.096-4.26-1.621-5.41-1.353-5.41 1.353-2.84 10.687-2.706 12.85H78.303c0-1.217 6.222-17.177 8.79-25.698 2.707-8.791 1.354-11.294 1.354-12.172h15.554c.27.743-.743 6.086 1.353 12.172 3.787 11.157 10.822 25.698 10.822 25.698M131.052 18.84s9.874 2.976 10.145 10.144c.269 7.71-6.087 9.468-8.117 10.145 0 0 0 2.703-2.028-6.086-1.285-5.615 0-14.203 0-14.203m-11.497 30.906s2.976-6.493 4.058-16.231c1.353-12.173-4.598-17.38-4.735-21.64h18.938c6.086 2.028 12.78 9.941 12.848 18.259.135 10.077-6.086 18.934-13.525 19.612-4.599.404-13.255 0-17.584 0M199.356 17.488s8.114-.678 7.437 6.086c-.269 2.839-6.086 5.409-7.437 5.409 0 0 .677-2.771.677-5.409 0-2.367-.677-6.086-.677-6.086m-12.85-5.411h25.7c2.704.677 4.598 5.004 4.056 8.792-.61 4.598-6.086 8.791-6.086 8.791.135.947 1.827 6.898 4.058 10.82 2.704 4.734 5.951 7.575 6.084 9.467h-13.525c0-1.15 2.03-4.733-.673-11.495-1.086-2.84-3.383-4.733-3.383-4.733-1.353-2.03-3.38-.678-3.38-.678-2.706 1.353-.678 12.85 2.705 16.906h-15.556c3.38-3.38 5.411-16.906 5.411-16.906 1.353-16.23-5.411-19.072-5.411-20.964M280.51 31.689a8.115 8.115 0 0 1 16.229 0 8.115 8.115 0 1 1-16.229 0m-6.087-.339c0-10.643 7.266-19.273 16.229-19.273 8.964 0 16.233 8.63 16.233 19.273 0 10.645-7.27 19.275-16.233 19.275s-16.23-8.63-16.23-19.275"/></g>
  </svg>
)

How to use the Trader Joe's icon

import { TraderJoesLogo } from "@/assets/icons/traderjoesLogo"

export default function Example() {
  return <TraderJoesLogo 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 Trader Joe's 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.