How to use the Saucony icon
import { SauconyLogo } from "@/assets/icons/sauconyLogo"
export default function Example() {
return <SauconyLogo width="32px" height="32px" />
}Brands icon
Saucony JSX Icon
Copy the Saucony icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentSauconyLogo
FilesauconyLogo.jsx
CategoryBrands
Copy-ready code
Saucony React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1115267292
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const SauconyLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 440 114.86" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="M22.621 292.53h-.024M671.765 365.907c-3.963 0-8.164-1.196-12.472-3.566l-2.039-1.113-9.583 21.113 1.774.925c8.189 4.473 15.635 6.356 24.795 6.356 16.979 0 26.81-8.288 35.039-29.484l41.071-106.155h-28.665s-21.189 60.75-24.556 70.34c-3.64-9.491-26.9-70.34-26.9-70.34h-29.293s41.964 100.666 42.697 102.44c-3.606 7.843-7.114 9.484-11.868 9.484M405.838 339.214l1.37-1.536-16.864-16.656-1.576 1.56c-7.99 8.213-15.55 11.87-24.456 11.87-15.873 0-27.84-12.91-27.84-30.119v-.38c0-16.697 11.72-29.73 26.709-29.73 11.605 0 18.604 5.686 24.465 11.843l1.56 1.676 17.21-18.53-1.354-1.494c-11.284-12.447-24.151-17.994-41.683-17.994-30.441 0-54.237 23.97-54.237 54.61v.395c0 30.3 23.713 54.047 54.039 54.047 22.153 0 33.999-9.888 42.657-19.562M468.28 358.389c31.43 0 55.978-23.897 55.978-54.411v-.387c0-30.433-24.415-54.246-55.55-54.246-31.29 0-55.763 23.978-55.763 54.633v.396c0 30.276 24.316 54.015 55.335 54.015m-28-54.798c0-17.235 11.771-29.773 28-29.773 16.333 0 28.674 12.95 28.674 30.16v.396c0 14.75-9.716 29.715-28.247 29.715-15.954 0-28.426-13.19-28.426-30.111M264.01 252.952l.132 2.138v57.38c0 11.672-7.57 19.811-18.482 19.811-10.762 0-18.925-8.634-18.925-20.09v-59.24h-28.758v59.52c0 25.975 20.817 43.07 47.403 43.07 8.122 0 15.708-3.022 22.336-6.397l1.881-1.008.306 5.307v2.015h23.028V252.952h-28.79M568.639 355.54l-.116-2.112v-57.391c0-11.703 7.578-19.834 18.473-19.834 10.804 0 18.934 8.635 18.934 20.114v59.223h28.766v-59.503c0-26.024-20.808-43.085-47.394-43.085-8.163 0-15.741 2.996-22.37 6.405l-1.88.982-.298-5.3v-2.087h-23.053V355.54h28.822M151.219 254.644v4.44c-8.255-4.713-18.117-9.558-28.914-9.558-31.877 0-56.854 22.237-56.854 53.47v.404c0 30.91 24.82 52.875 56.482 52.875 10.797 0 20.776-4.977 29.286-9.83v7.181h25.719V252.2h-25.72zm-27.924 79.09c-17.267 0-31.25-13.768-31.25-30.739 0-16.962 13.983-30.73 31.25-30.73 17.251 0 31.258 13.768 31.258 30.73 0 16.971-14.007 30.738-31.258 30.738M15.473 267.297c7.008 0 16.69 3.393 28.69 10.012l.967.545 10.755-19.496-.858-.553c-11.705-7.263-26.446-11.589-39.414-11.589-19.908 0-39.998 10.648-39.998 34.486v.396c0 19.496 17.944 27.255 33.536 31.835 10.342 3.054 20.436 6.661 20.436 14.355v.387c0 3.31-1.477 11.977-15.228 11.977-9.649 0-21.881-5.671-34.502-14.157l-.907-.634-12.051 18.53.85.611c13.437 9.921 29.681 16.673 45.76 16.673 27.04 0 41.914-13.116 41.914-34.634v-2.18c0-13.618-10.87-23.854-33.322-31.331h.017-.017l-2.74-.933c-10.392-3.45-17.911-5.96-17.911-13.875v-.438c0-4.795 4.39-9.987 14.023-9.987" transform="translate(33.238 -88.466)scale(.39992)"/><path d="M965.681 371.562v-.033c-8.403-5.729-8.403-5.77-14.148-9.237-55.12-33.411-83.604-37.332-110.322-28.41-20.767 6.95-56.482 35.22-56.482 35.22-32.62 21.766-65.612 57.736-142.935 53.535-71.991-3.896-220.232-42.392-222.024-42.887-1.791-.52-3.656.816-3.104 2.922.422 1.592 4.02 9.49 4.02 9.49.455 1.075 1.412 1.322 1.883 1.537C481.6 417.389 661.66 483.41 725.3 483.41c75.846 0 138.6-105.296 206.069-105.296 20.932 0 26.248.752 29.244.776 2.98.256 5.497-.644 6.247-3.269 0 0 1.041-2.187-1.179-4.06m-195.694 67.492a16.13 16.13 0 0 1-6.91 10.334c-3.63 2.427-7.946 3.244-12.214 2.427-4.26-.891-7.917-3.335-10.31-6.933-4.976-7.48-2.938-17.556 4.523-22.533 7.454-4.953 17.549-2.915 22.51 4.522a16.15 16.15 0 0 1 2.4 12.183m40.867-21.451c-7.47 4.96-17.549 2.905-22.533-4.524-4.92-7.487-2.931-17.58 4.522-22.524 7.463-4.937 17.556-2.906 22.517 4.513 1.84 2.724 2.698 5.87 2.724 8.931 0 5.274-2.543 10.458-7.23 13.604m54.69-42.13c-.842 4.252-3.31 7.95-6.94 10.31-3.608 2.435-7.925 3.269-12.167 2.41-4.268-.85-7.925-3.326-10.36-6.908-2.377-3.624-3.235-7.94-2.377-12.19.858-4.26 3.285-7.934 6.95-10.32 3.59-2.41 7.899-3.268 12.166-2.41 4.244.843 7.916 3.31 10.326 6.926 2.402 3.6 3.252 7.924 2.402 12.183M778.126 254.81c10.903 0 19.983 8.517 19.983 19.693 0 11.365-9.08 19.9-19.983 19.9-10.821 0-19.934-8.535-19.934-19.702 0-11.374 9.113-19.892 19.934-19.892m0 36.705c9.334 0 16.788-7.354 16.788-17.011 0-9.541-7.454-16.83-16.788-16.83-9.287 0-16.757 7.289-16.757 17.028 0 9.459 7.47 16.813 16.757 16.813m-7.38-28.236h8.445c5.446 0 8.03 2.005 8.03 6.586 0 4.119-2.64 5.853-6.058 6.232l6.653 10.119h-3.509l-6.264-9.855h-4.086v9.855h-3.211zm3.211 10.218h3.912c3.186 0 6.158-.173 6.158-3.788 0-3.187-2.691-3.575-5.159-3.575h-4.91" transform="translate(33.238 -88.466)scale(.39992)"/>
</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 brands collection.
Related JSX icons
FAQ
Is the Saucony 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.