How to use the Messenger icon
import { MessengerLogo } from "@/assets/icons/messengerLogo"
export default function Example() {
return <MessengerLogo width="32px" height="32px" />
}Brands icon
Messenger JSX Icon
Copy the Messenger icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentMessengerLogo
FilemessengerLogo.jsx
CategoryBrands
Copy-ready code
Messenger React JSX component
export const MessengerLogo = ({ width = "40px", height = "40px", color = "#007FFF", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<g id="Icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Color-" transform="translate(-301.000000, -860.000000)" fill={color}>
<path d="M325,860 C311.745143,860 301,869.949185 301,882.222222 C301,889.215556 304.489988,895.453481 309.944099,899.526963 L309.944099,908 L318.115876,903.515111 C320.296745,904.118667 322.607155,904.444444 325,904.444444 C338.254857,904.444444 349,894.495259 349,882.222222 C349,869.949185 338.254857,860 325,860 L325,860 Z M327.385093,889.925926 L321.273292,883.407407 L309.347826,889.925926 L322.465839,876 L328.726708,882.518519 L340.503106,876 L327.385093,889.925926 L327.385093,889.925926 Z" id="Messenger"></path>
</g>
</g>
</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 Messenger 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.