Brands icon

Facebook JSX Icon

Q: Is the Facebook JSX icon free?

Yes. You can copy the Facebook JSX component and use it in React and Next.js projects.

Q: Can I customize the Facebook icon?

Yes. Edit SVG attributes or pass className, width, height and color props depending on the component.

Copy the Facebook icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.

Browse all icons

ComponentFacebookLogo

FilefacebookLogo.jsx

CategoryBrands

Copy-ready code

Facebook React JSX component

export const FacebookLogo = ({ width = "40px", height = "40px", color = "#4460A0", ...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(-200.000000, -160.000000)" fill={color}>
        <path d="M225.638355,208 L202.649232,208 C201.185673,208 200,206.813592 200,205.350603 L200,162.649211 C200,161.18585 201.185859,160 202.649232,160 L245.350955,160 C246.813955,160 248,161.18585 248,162.649211 L248,205.350603 C248,206.813778 246.813769,208 245.350955,208 L233.119305,208 L233.119305,189.411755 L239.358521,189.411755 L240.292755,182.167586 L233.119305,182.167586 L233.119305,177.542641 C233.119305,175.445287 233.701712,174.01601 236.70929,174.01601 L240.545311,174.014333 L240.545311,167.535091 C239.881886,167.446808 237.604784,167.24957 234.955552,167.24957 C229.424834,167.24957 225.638355,170.625526 225.638355,176.825209 L225.638355,182.167586 L219.383122,182.167586 L219.383122,189.411755 L225.638355,189.411755 L225.638355,208 L225.638355,208 Z" id="Facebook"></path>
      </g>
    </g>
  </svg>
);

How to use the Facebook icon

import { FacebookLogo } from "@/assets/icons/facebookLogo"

export default function Example() {
  return <FacebookLogo width="32px" height="32px" />
}

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.

ReactNext.jsJSXSVGBrands icons

Looking for a similar mark? Browse the related icons below or explore the full brands collection.

Related JSX icons

.NET

1Password

Accenture

AdGuard

Adidas

Adobe After Effects

Adobe Illustrator

Adobe Photoshop

FAQ

Is the Facebook 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.