How to use the 7-Eleven icon
import { SevenElevenLogo } from "@/assets/icons/sevenelevenLogo"
export default function Example() {
return <SevenElevenLogo width="32px" height="32px" />
}E-commerce icon
7-Eleven JSX Icon
Copy the 7-Eleven icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentSevenElevenLogo
FilesevenelevenLogo.jsx
CategoryE-commerce
Copy-ready code
7-Eleven React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1114800421
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const SevenElevenLogo = ({ width = "40px", height = "40px", color = "#008061", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 45 60" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<defs><path id="a" d="M0 0h45v59.9H0z"/></defs><clipPath id="b"><use href="#a"/></clipPath><path d="M34.2 45c.9 0 1.7.8 1.7 1.7s-.7 1.7-1.7 1.7c-.9 0-1.6-.8-1.6-1.7s.7-1.7 1.6-1.7m0 3c.7 0 1.3-.6 1.3-1.3 0-.8-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3c0 .8.6 1.3 1.3 1.3m-.2-.4h-.3v-1.8h.6q.6 0 .6.6c0 .3-.2.5-.4.5l.4.7h-.4l-.4-.7H34zm.2-1q.3 0 .3-.3t-.3-.3H34v.5h.2z"/><path d="M42.2 32.3c-.9 0-1.5.4-2.1.9l-.4.6-.1-.1.5-.8v-.5h-3.2V43h2.9v-6.7c0-1.1.7-1.4 1.2-1.5s1.1.2 1.1.8V43H45v-7.3c0-2.3-1-3.4-2.8-3.4"/><path d="M9.9 40.6h3v2.3H7V32.3h2.9z"/><path d="M0 42.9h5.9v-2.1h-3v-2.3h3v-2h-3v-2h3v-2.2H0z"/><path d="M13.9 42.9h6v-2.1h-3.1v-2.3h3.1v-2h-3.1v-2h3.1v-2.2h-6z"/><path d="M29.9 42.9h6v-2.1h-3.1v-2.3h3.1v-2h-3.1v-2h3.1v-2.2h-6z"/><path d="M26.1 32.3 25 39l-.1 1.2v.1h-.1v-.1l-.1-1.2-1.1-6.7h-2.9l2.4 10.6h3.6l2.4-10.6z"/><path d="M37.7 0H0v15h19.9C24.4 8.5 30.5 3.3 37.7 0"/><path d="M15 59.9h15v-15H15z"/><path d="M45 15V0C30.7 3.9 19.5 15.4 16.1 30h15.3c2.3-6.7 7.3-12.1 13.6-15"/>
</svg>
)
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.
Looking for a similar mark? Browse the related icons below or explore the full e-commerce collection.
Related JSX icons
FAQ
Is the 7-Eleven 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.