How to use the Costco icon
import { CostcoLogo } from "@/assets/icons/costcoLogo"
export default function Example() {
return <CostcoLogo width="32px" height="32px" />
}E-commerce icon
Costco JSX Icon
Copy the Costco icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentCostcoLogo
FilecostcoLogo.jsx
CategoryE-commerce
Copy-ready code
Costco React JSX component
// Source: https://raw.githubusercontent.com/glincker/thesvg/bc1ea3c9c5901d1d7a9438e760a9d071955ff29d/public/icons/costco/default.svg
// Asset license: MIT License
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const CostcoLogo = ({ width = "40px", height = "40px", color = "#E31837", ...props }) => (
<svg {...props} width={width} height={height} viewBox="208.5 290.5 201 72" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path fill="currentColor" d="M401.434 311.283c-3.194-3.873-8.83-6.094-15.459-6.094-7.014 0-13.328 2.385-17.701 6.256l.713-4.469-1.896-.564c-2.684-.8-5.664-1.223-8.619-1.223-5.078 0-9.934 1.57-13.857 4.157l1.129-3.72H315.38l-.36 1.188c-2.698-1.085-5.666-1.625-9.01-1.625-6.251 0-13.017 2.426-16.53 7.097-.23-.342-.471-.679-.739-1.003-3.195-3.873-8.83-6.094-15.46-6.094-6.806 0-12.961 2.244-17.315 5.916l1.695-10.305-1.926-.557c-3.289-.951-6.944-1.454-10.571-1.454-13.306 0-25.417 8.458-27.571 19.254-.917 4.593.154 9.042 3.013 12.529 2.437 2.971 6.036 5.089 10.312 6.171h-13.183v16.862h67.151l.104-.206.013.206h8.083l1.096-1.787-.339 1.787h18.275l.268-1.409c1.606 1.04 3.691 1.605 6.092 1.605 2.146 0 4.137-.445 5.853-1.236l-.197 1.04h25.623l.044-.229c1.188.268 2.436.426 3.628.426.724 0 1.47-.065 2.212-.196h9.769l.725-1.539h.651l.199 1.539h30.13l1.498-7.89h-.55l.206-1.084h.394l1.5-7.889h-.834c.68-.615 1.175-1.405 1.346-2.304a3.6 3.6 0 0 0-.76-2.981 3.7 3.7 0 0 0-.602-.571c2.39-2.455 4.047-5.426 4.691-8.766.787-4.097-.1-7.845-2.57-10.838m-17.432 33.843h-.925l1.396-7.336q.478-.062.949-.137zm-21.564-23.864c-.096.49-.162.974-.211 1.451-2.033 1.36-3.938 2.003-5.976 2.003-1.379 0-2.573-.45-3.194-1.204-.354-.428-.473-.907-.363-1.464.363-1.879 2.912-3.527 5.453-3.527 1.59 0 3.084.562 4.549 1.712-.091.341-.192.68-.258 1.029m2.058 15.48-.992 1.635-.825-.462a10 10 0 0 0-1.727-.744c.44-.105.851-.223 1.209-.353l1.157-.42 1.137-4.985c.154.214.3.433.47.639 1.716 2.079 4.188 3.669 7.173 4.689zm10.063.69-.395 2.075-.549-2.305c.311.081.623.16.944.23m9.668-18.693c1.238 0 2.191.329 2.685.926.453.55.437 1.251.34 1.744-.394 2.033-2.481 3.453-5.082 3.453-1.265 0-2.265-.334-2.745-.916-.332-.403-.431-.968-.293-1.681.337-1.752 2.196-3.526 5.095-3.526m-57.183 19.518a9 9 0 0 0-1.147-.646h1.271zm-6.991 6.867c-.164.146-.431.244-.74.262.158-.136.406-.248.74-.262m-1.987-26.195-1.508 4.964a7.3 7.3 0 0 0-1.234-3.603 8 8 0 0 0-1.047-1.219zm-43.509 2.479c-.393 2.034-2.483 3.454-5.082 3.454-1.264 0-2.265-.334-2.745-.916-.333-.403-.431-.968-.293-1.681.339-1.753 2.198-3.526 5.096-3.526 1.238 0 2.192.329 2.685.926.452.55.434 1.252.339 1.743m17.427 16.141-.049.104-.01-.113q.03.004.059.009m22.437-6.609-1.761 5.802h-6.763c3.457-1.141 6.557-3.054 8.524-5.802m.734 6.671h.377q-.21.088-.411.182zm-72.76-15.219c-1.93 0-3.602-.634-4.473-1.695-.504-.614-.673-1.294-.517-2.078.504-2.525 3.871-4.658 7.352-4.658 2.35 0 4.527.882 6.653 2.683a16.5 16.5 0 0 0-1.334 3.297c-2.597 1.662-5.05 2.451-7.681 2.451m39.78 11.955 2.197.989c1.214.546 2.563 1.013 3.975 1.407h-4.087l-.438.877-.056-.877H276.7a25.5 25.5 0 0 0 5.475-2.396m53.546 10.779 1.594-8.384h-7.736L335 318.877l1.653.063a16 16 0 0 0-.729 2.504c-.771 3.987.166 7.835 2.642 10.834 1.631 1.977 3.871 3.479 6.492 4.463h-6.817l-1.595 8.384zm-86.167-9.011 1.165-.41 1.018-4.326c.163.227.315.457.495.674 1.715 2.079 4.187 3.669 7.171 4.689h-12.338c.933-.175 1.791-.382 2.489-.627m139.841.627a27 27 0 0 0 2.894-1.074c.136.326.301.641.53.918.049.058.113.102.164.156z"/><path fill="currentColor" d="m281.647 339 .466 7.369h.118c.241-.753.509-1.539.885-2.276l2.54-5.093h4.127l.624 7.369h.118c.215-.721.457-1.475.787-2.178l2.48-5.191h5.601l-7.574 12.347h-4.697l-.414-6.714h-.177c-.18.64-.338 1.261-.63 1.867l-2.415 4.847h-4.58L276.065 339z"/><path fill="currentColor" d="M299 339h5.188l-.79 4.159h3.301l.791-4.159h5.188l-2.346 12.347h-5.188l.815-4.29h-3.302l-.815 4.29h-5.188z"/><path fill="currentColor" d="M327.873 345.206c-.753 3.963-4.88 6.337-9.398 6.337-4.521 0-7.746-2.375-6.992-6.337.737-3.881 4.912-6.403 9.412-6.403s7.714 2.522 6.978 6.403m-10.978.065c-.269 1.408.688 2.375 2.319 2.375s2.955-.967 3.224-2.375c.248-1.311-.604-2.407-2.314-2.407-1.712.001-2.981 1.097-3.229 2.407M329.053 339h5.385l-1.594 8.384h4.521l-.754 3.962h-9.905zm21.051 7.925.24.181c.844.622 1.907 1.13 3.146 1.13.531 0 1.41-.181 1.516-.737s-.592-.605-1.066-.688l-1.051-.163c-2.045-.312-3.615-1.344-3.25-3.275.559-2.931 4.072-4.569 7.295-4.569 1.69 0 3.179.345 4.492 1.081l-2.055 3.161c-.824-.524-1.788-.934-2.948-.934-.471 0-1.188.146-1.282.654-.088.458.567.524.965.606l1.176.229c2.197.427 3.656 1.441 3.259 3.537-.562 2.948-4.062 4.405-7.265 4.405-1.866 0-3.948-.426-5.484-1.13z"/><path fill="currentColor" d="m368.604 346.876-.215-2.178c-.058-.524-.054-1.064-.051-1.589h-.197l-1.697 3.767zm-4.688 4.471h-5.699L365.713 339h5.954l2.94 12.347h-5.699l-.198-1.539h-4.067z"/><path fill="currentColor" d="M376.504 339h5.385l-1.594 8.384h4.521l-.754 3.962h-9.904zm10.905 0h9.965l-.642 3.374h-4.541l-.224 1.179h4.146l-.609 3.21h-4.147l-.229 1.211h4.698l-.643 3.373h-10.121z"/><g fill="currentColor"><path d="m314.348 316.81 6.799-.255-5.705 18.799h12.199l5.703-18.799 6.646.255 2.708-8.926h-25.644zm-25.259 4.881c-1.706 8.815-11.052 14.099-21.292 14.099-10.239 0-17.542-5.283-15.836-14.099 1.67-8.635 11.125-14.244 21.32-14.244s17.478 5.61 15.808 14.244m-24.87.146c-.605 3.133 1.562 5.283 5.255 5.283 3.695 0 6.693-2.149 7.299-5.283.564-2.914-1.368-5.354-5.241-5.354-3.873-.002-6.749 2.44-7.313 5.354"/><path d="M285.298 333.276c3.481 1.565 8.195 2.514 12.424 2.514 7.257 0 15.185-3.242 16.453-9.8.902-4.663-2.399-6.922-7.381-7.869l-2.662-.51c-.9-.183-2.385-.328-2.188-1.349.218-1.129 1.84-1.458 2.909-1.458 2.625 0 4.81.911 6.676 2.077l4.654-7.031c-2.978-1.639-6.346-2.403-10.175-2.403-7.301 0-15.263 3.643-16.524 10.164-.832 4.299 2.731 6.594 7.36 7.287l2.378.363c1.078.184 2.66.292 2.42 1.53s-2.231 1.639-3.434 1.639c-2.805 0-5.213-1.129-7.126-2.513l-.545-.401zm81.145-24.7c-2.44-.729-5.213-1.129-7.974-1.129-9.838 0-18.78 6.412-20.331 14.427-1.516 7.833 4.787 13.917 14.359 13.917 2.18 0 6.784-.328 8.893-1.093l2.344-10.273c-2.264 1.566-4.678 2.55-7.483 2.55-3.649 0-6.36-2.332-5.774-5.354.578-2.988 4.02-5.355 7.67-5.355 2.76 0 4.961 1.275 6.633 2.77zm19.532-1.129c-10.194 0-19.649 5.609-21.32 14.244-1.705 8.815 5.598 14.099 15.838 14.099 10.238 0 19.586-5.283 21.291-14.099 1.668-8.634-5.616-14.244-15.809-14.244m-1.748 9.034c3.873 0 5.806 2.44 5.24 5.354-.605 3.133-3.604 5.283-7.299 5.283s-5.861-2.149-5.255-5.283c.564-2.912 3.441-5.354 7.314-5.354m-129.121-14.07c-3.045-.881-6.501-1.365-9.944-1.365-12.271 0-23.424 7.75-25.357 17.438-1.889 9.468 5.971 16.821 17.908 16.821 2.721 0 8.464-.396 11.091-1.32l2.923-12.419c-2.821 1.894-5.834 3.083-9.333 3.083-4.553 0-7.932-2.819-7.203-6.475.721-3.61 5.013-6.474 9.565-6.474 3.442 0 6.188 1.542 8.271 3.347z"/><path d="M394.277 334.018c.183-.959 1.252-1.732 2.416-1.732 1.155 0 1.938.773 1.756 1.732-.185.965-1.259 1.738-2.416 1.738-1.163 0-1.938-.774-1.756-1.738m3.628 0c.146-.772-.408-1.279-1.3-1.279-.906 0-1.638.507-1.783 1.279-.147.773.391 1.285 1.298 1.285.891 0 1.638-.511 1.785-1.285m-.743.907h-.539l-.339-.769h-.353l-.146.769h-.458l.345-1.816h1.057c.466 0 .718.129.638.556-.061.311-.304.471-.585.493zm-.668-1.116c.229 0 .426 0 .464-.194.03-.16-.168-.16-.397-.16h-.496l-.065.354z"/></g><path fill="currentColor" d="M220.658 351.367h57.093l-.004-.02h-.047l-.722-3.14h-56.32zm0-4.488h56.014l-.728-3.159h-55.286zm0-4.507h54.958l-.247-1.151-.505-2.197h-54.206zM339.959 339h9.964l-.641 3.374h-4.54l-.225 1.179h4.146l-.609 3.21h-4.146l-.23 1.211h4.697l-.641 3.373h-10.123z"/>
</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 Costco 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.