How to use the SPAR icon
import { SparLogo } from "@/assets/icons/sparLogo"
export default function Example() {
return <SparLogo width="32px" height="32px" />
}E-commerce icon
SPAR JSX Icon
Copy the SPAR icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentSparLogo
FilesparLogo.jsx
CategoryE-commerce
Copy-ready code
SPAR React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1245783558
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const SparLogo = ({ width = "40px", height = "40px", color = "#00843D", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 1013.95 161.11" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="m0 3.09 810.16-.01v154.84L0 157.93z"/><path d="M575.91 30.93c6.97 0 11.29 2.57 17.81 10.9l48.48 69.37c2.58 3.63 2.33 9.42-2.12 13.18-3.94 3.33-10.91 3.63-14.69-1.36l-11.6-16.05h-76.36l-11.59 16.35c-4.09 4.85-9.09 4.85-13.63 1.82-4.72-3.15-5.92-9.24-3.03-13.48l48.93-69.82c6.22-8.64 11.14-10.91 17.8-10.91m2.9 25.67c-1.28-1.87-1.75-2.05-3.11-2.05-1.52 0-2.12.76-3.15 2.14-1.67 2.23-21.11 30.88-21.33 30.88h49.09c-.1 0-18.79-26.96-21.5-30.97M245.25 31.05h69.84c17.33 0 18.92 19.94 18.92 19.94h-85.92c-4.25 0-8.2 3.21-8.2 8.8 0 6.37 4.84 9.4 7.9 9.4h60.72c12.03 0 29.15 10.02 29.15 27.32 0 22.46-19.89 30.44-26.81 30.44h-71.04c-21.11 0-19.94-20.13-19.94-20.13h88.05c3.52 0 8.71-3.49 8.71-8.71 0-4.98-4.55-8.8-7.9-8.8h-59.5c-16.88 0-29.96-12.53-29.96-29.53-.03-19.12 16.38-28.73 25.98-28.73M692.88 30.92H765c10.93 0 27.88 8.93 27.88 30.29v1.36c0 11.37-7.12 21.36-17.12 26.2 0 0 .72 1.09 16.21 22.11 2.01 2.72 2.12 9.24-2.27 13.18-4.19 3.76-11.17 4.23-14.69.15-4.92-5.69-10.61-13.18-26.21-33.01h-28.18c-8.03 0-18.93-6.37-18.93-20.45h60.9c3.31-.14 8.61-3.31 8.61-9.53 0-5.75-5.1-9.7-8.64-9.7H695.3l.05 63.75c.01 6.96-5.33 11.65-11.08 11.65-5.46 0-10.9-4.84-10.9-11.36V50.61c-.02-10.92 11.49-19.69 19.51-19.69M395.66 31.08h72.12c10.93 0 27.88 8.94 27.88 30.29v1.36c0 11.38-7.12 21.36-17.12 26.2 0 0-5.17 1.67-10.02 2.28h-45.3c-8.03 0-18.33-6.51-18.33-20.6h60.29c3.31-.14 8.78-3.01 8.78-9.23 0-5.75-5.1-9.7-8.64-9.7l-67.25-.01.04 63.76c.01 6.96-5.33 11.65-11.08 11.65-5.46 0-10.9-4.84-10.9-11.36V50.77c-.01-10.92 11.5-19.69 19.53-19.69"/><path d="M848.77 82.59c0 29.71 14.96 56.32 41.32 69.34 24.77 12.24 57.78 12.24 82.62 0 24.5-12.07 41.24-39.62 41.24-69.34 0-45.45-36.36-82.59-82.59-82.59-46.45 0-82.59 36.85-82.59 82.59"/><path d="M931.4 21.41c-8.31 28.18-33.08 69.48-51.15 89.73h42.84l.1 12.27c-.1 6.96-5.63 14.18-13.68 14.08-11.19-.13-25.18-5.3-33.63-19.65-6.16-10.47-10.63-18.72-10.63-35.25 0-36.13 29.1-66.06 66.12-66.06 36.61 0 66.12 30.81 66.12 66.06 0 16.54-7.72 30.84-10.27 34.96-9.04 14.64-22.8 19.81-33.46 19.94-7.35.09-14.12-5.3-14.12-14.12v-12.24h43.5c-18.73-20.24-43.5-61.53-51.74-89.72"/>
</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 SPAR 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.