How to use the Publix icon
import { PublixLogo } from "@/assets/icons/publixLogo"
export default function Example() {
return <PublixLogo width="32px" height="32px" />
}E-commerce icon
Publix JSX Icon
Copy the Publix icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentPublixLogo
FilepublixLogo.jsx
CategoryE-commerce
Copy-ready code
Publix React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1114706682
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const PublixLogo = ({ width = "40px", height = "40px", color = "#3E7A2D", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 537.31 121.24" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="M0 39.08S.12 3.47 43.24 3.47c61.87 0 60.88 88.98 1.25 88.98-12.12 0-21.18-3.06-26.74-7.51v35.5H0zm43.35-15.59c-30.14 0-30.52 47.45 0 47.45 30.61 0 30.14-47.45 0-47.45M236.22 84.82s.11 35.62 43.24 35.62c61.4 0 58.81-88.98 1.25-88.98-12.12 0-21.18 3.06-26.74 7.51V3.47h-17.75zm43.35 15.59c-30.2 0-30.54-47.45 0-47.45 30.61 0 30.24 47.45 0 47.45M121.15 91.99l.02-55.98h20.22l.12 55.98s3.37 11.98 17.75 11.98c14.15 0 20.37-11.98 20.37-11.98l.11-55.98h18.66v55.98s-4.39 29.24-38.23 29.24c-34.05 0-39.02-29.24-39.02-29.24M356.81 5.97h20.25v114.47h-20.25zM413.7 36.46h20.26v83.98H413.7zM437.18 12.4c0 6.85-5.55 12.4-12.4 12.4s-12.4-5.55-12.4-12.4S417.93 0 424.78 0s12.4 5.55 12.4 12.4M491.9 77.37l-25.44-40.68h22.76l11.6 20.26 11.5-20.26h20.25l-20.36 40.62 25.1 43.13h-20.09l-13.83-22.76-11.66 22.76h-22.7z"/>
</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 Publix 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.