How to use the LinkedIn icon
import { LinkedinCircleLogo } from "@/assets/icons/linkedinCircleLogo"
export default function Example() {
return <LinkedinCircleLogo width="32px" height="32px" />
}Brands icon
LinkedIn JSX Icon
Copy the LinkedIn icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentLinkedinCircleLogo
FilelinkedinCircleLogo.jsx
CategoryBrands
Copy-ready code
LinkedIn React JSX component
export const LinkedinCircleLogo = ({ width = "40px", height = "40px", color = "#1275B1", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="28" height="28" rx="14" fill={color} />
<path d="M12.6186 9.69215C12.6186 10.6267 11.8085 11.3843 10.8093 11.3843C9.81004 11.3843 9 10.6267 9 9.69215C9 8.7576 9.81004 8 10.8093 8C11.8085 8 12.6186 8.7576 12.6186 9.69215Z" fill="white" />
<path d="M9.24742 12.6281H12.3402V22H9.24742V12.6281Z" fill="white" />
<path d="M17.3196 12.6281H14.2268V22H17.3196C17.3196 22 17.3196 19.0496 17.3196 17.2049C17.3196 16.0976 17.6977 14.9855 19.2062 14.9855C20.911 14.9855 20.9008 16.4345 20.8928 17.5571C20.8824 19.0244 20.9072 20.5219 20.9072 22H24V17.0537C23.9738 13.8954 23.1508 12.4401 20.4433 12.4401C18.8354 12.4401 17.8387 13.1701 17.3196 13.8305V12.6281Z" fill="white" />
</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 LinkedIn 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.