Open Graph
The Open Graph icon represents Open Graph, a protocol for social media metadata.
Exports at 29 × 24 px
Code
Open Graph in your framework
In any framework. Customize it above, and the code follows.
export const OpenGraphIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="24" viewBox="0 0 256 209" {...props}>
<path fill="#B8C6C9" d="M231.941 142.042c-3.532 0-6.955.772-9.98 2.146c-1.325-.806-1.998-1.588-3.998-2.35V52.714L127.75.214L51.988 44.935c-1.286-.753-2.58-1.539-3.907-2.343c-.109-13.167-10.843-23.847-24.035-23.847C10.785 18.745 0 29.534 0 42.795c0 13.26 10.79 24.049 24.052 24.049c3.532 0 7.03-.772 10.054-2.146c1.253.762 2.86 1.502 3.86 2.224v89.93l90.084 52.143l76.497-44.746c1.124.662 2.23 1.345 3.385 2.046c.11 13.168 10.835 23.847 24.027 23.847c13.261 0 24.041-10.79 24.041-24.05s-10.798-24.05-24.059-24.05"/><path fill="#759BC5" d="m127.876 194.069l77.148-45.14v-88.65L127.872 15.36L50.766 60.908v88.543zm115.057-27.779c0 6.048-4.898 10.95-10.937 10.95c-6.041 0-10.937-4.902-10.937-10.95s4.896-10.95 10.937-10.95s10.937 4.903 10.937 10.95M13.072 42.784c0-6.047 4.896-10.95 10.937-10.95s10.937 4.903 10.937 10.95s-4.897 10.95-10.937 10.95s-10.937-4.903-10.937-10.95"/><path fill="#343532" d="M232.096 172.75a6.57 6.57 0 0 1-6.565-6.566a6.57 6.57 0 0 1 6.565-6.564a6.57 6.57 0 0 1 6.564 6.564a6.57 6.57 0 0 1-6.564 6.565m-89.16 7.354c7.145-10.292 15.613-25.042 20.823-42.76c11.066 2.271 21.394 5.951 32.598 11.542zM89.016 78.04c-1.727 7.203-2.91 14.875-3.178 22.945c-10.058.003-19.858.003-30.867.003V65.571c11.01 5.935 22.598 9.936 34.044 12.47M24.033 49.347a6.57 6.57 0 0 1-6.566-6.565a6.57 6.57 0 0 1 6.566-6.564a6.57 6.57 0 0 1 6.564 6.564a6.57 6.57 0 0 1-6.564 6.565m87.425-19.163C104.28 40.208 96.065 54.267 90.934 71.32c-10.346-2.25-20.104-5.769-30.61-10.965zm19.385 97.081c.006-2.691.014-5.424.022-8.189c5.673-1.137 10.176-5.512 11.524-11.106c6.932.006 13.555.01 20.052.011c-.264 7.48-1.347 14.677-2.99 21.497c-8.787-1.43-18.115-2.104-28.608-2.213m-.012 7c9.867.102 18.592.701 26.78 1.975c-6.926 22.825-19.529 40.672-26.634 49.495a5850 5850 0 0 1-.146-51.47m-39.881 4.054c5.14 17.12 13.366 31.122 20.55 41.066l-52.484-30.332c6.425-3.019 17.44-7.492 31.934-10.734m22.536-30.346c1.327 5.503 5.709 9.821 11.253 11.041c-.009 2.791-.017 5.552-.023 8.269a177 177 0 0 0-29.545 2.97c-1.7-6.985-2.812-14.432-3.061-22.268c6.964-.002 14.016-.006 21.376-.012m11.225-26.276q.01 4.143.024 8.27c-5.53 1.217-9.903 5.519-11.24 11.003c-7.36.006-14.41.01-21.374.013a109 109 0 0 1 2.998-21.758c9.085 1.583 18.711 2.337 29.592 2.472m-.069-53.737c.01 15.356.02 31.085.052 46.735c-10.243-.126-19.26-.795-27.733-2.215c7.121-23.304 20.274-40.677 27.678-49.144zm38.968 43.15c-5.194-17.348-13.513-31.767-20.568-41.88l53.776 31.27c-6.64 3.016-18.107 7.486-33.207 10.61m-32.84-43.154l-.004-4.699c7.015 8.575 19.693 26.218 26.717 49.006a174 174 0 0 1-26.662 2.427a30724 30724 0 0 1-.052-46.734m-2.833 84.41c-4.343 0-7.877-3.533-7.877-7.877s3.534-7.877 7.877-7.877c4.344 0 7.878 3.534 7.878 7.877c0 4.344-3.534 7.878-7.878 7.878m-3.083 73.846c-7.312-8.343-20.582-25.763-27.801-49.143a168.7 168.7 0 0 1 27.651-2.783a5831 5831 0 0 0 .15 51.926m17.524-85.245c-1.361-5.574-5.856-9.932-11.517-11.065l-.023-8.21a183 183 0 0 0 28.53-2.603c1.694 6.926 2.811 14.254 3.075 21.89c-6.5-.002-13.13-.006-20.065-.012m57.711-.01c-10.008.014-21.207.022-31.838.022c-.257-8.066-1.556-15.777-3.291-23.043c16.321-3.385 29.125-8.292 35.13-11.488zM54.971 107.99c11.01 0 20.852 0 30.905-.003c.244 8.297 1.332 16.153 3.083 23.505c-15.62 3.495-26.982 8.378-33.988 11.59zm110.246 22.616c1.678-7.151 2.616-14.721 2.872-22.624c10.629 0 21.993-.008 32.001-.023v35.327c-11.009-6.128-22.947-10.183-34.873-12.68m66.879 20.261c-4.114 0-8.043 1.639-10.797 4.287c-4.16-2.61-8.198-4.99-12.201-7.172V57.746L127.722 10.31L51.136 55.554c-4.087-2.288-8.278-4.817-12.746-7.62c.58-1.613.936-3.342.936-5.152c0-8.446-6.86-15.316-15.305-15.316S8.71 34.336 8.71 42.782S15.585 58.1 24.03 58.1c4.114 0 7.617-1.638 10.372-4.286c4.082 2.56 8.56 4.9 11.562 7.048v91.023L127.72 199l77.605-45.284a303 303 0 0 1 12.307 7.316a15.2 15.2 0 0 0-.883 5.152c0 8.446 6.886 15.318 15.332 15.318s15.324-6.872 15.324-15.318s-6.863-15.317-15.31-15.317"/>
</svg>
);SVG Logos
More like it
Icons that share its tags, in the same style.
Search SVG Logos
Skip the copy and paste. With Pro, your AI agent finds and installs any SVG Logos icon from a prompt.
Get ProTags
Browse by tag
Open Graph is tagged media, social, web and 3 more. Related tags follow; each opens its icons from every library.
Pricing
SVG Logos MCP, with Pro
Ask for Open Graph or any of 2,063 SVG Logos icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the Open Graph icon means and where it's used, then how to install, style, label and license it.
The Open Graph icon represents Open Graph, a protocol for social media metadata. Open Graph allows developers to control how content is displayed on social media platforms.
In real-world applications, the Open Graph icon appears in social media management tools, content creation software, and SEO platforms. It's often used to indicate social media optimization or metadata management capabilities.
From a UX perspective, the Open Graph icon communicates a sense of social media presence, content optimization, and discoverability. It helps users understand that a particular feature or tool is related to social media or content management.
Open Graph is one of 2,063 icons in SVG Logos, made by Gil Barbara and released under CC0. It is drawn on a 256 × 209 grid.
Sign in (it's free), then open Get icon, Install with shadcn CLI, and pick your package manager to copy the command. It adds OpenGraphIcon to components/icons/logos-open-graph.tsx: one file, a size prop (24 by default) and every SVG prop, with no icon package.
Copy it as React (from Get icon, or the Code section): a typed OpenGraphIcon component you paste into your project, with no package to install. Only the icons you import reach your bundle. It works in Next.js and any React app.
Open Get icon, then Copy as code, and pick Vue, Svelte, Angular, Solid or Preact; the Code section shows each one too. Every version is one self-contained component with the SVG inside, and SVG and data URL copies are there for plain HTML and CSS.
With Pro, the shadcn.io MCP server lets Claude Code, Cursor or any MCP client find the Open Graph icon, or any of 2,063 SVG Logos icons, and install it from a prompt.
It's multicolor, so it keeps its own colors.
Set width and height on the component, or a class like size-6. It's drawn on a 256 × 209 grid, so it stays sharp at any size. Customize also sets the size it exports at, its padding and rotation.
Yes. It keeps its own colors in light and dark mode, so check it against both backgrounds. The icon is a vector, so it needs no separate dark asset.
Next to a visible label it's decoration: add aria-hidden="true" so screen readers skip it. Standing alone, as in an icon button, give the button a name instead, like aria-label="Open Graph", so screen readers say what it does.
Yes. OpenGraphIcon passes every SVG prop to the svg element, so <OpenGraphIcon aria-hidden="true" /> works, and so do role="img" with aria-label, or a title child, when it carries meaning on its own.
Yes. Open Get icon, then Download file: SVG for code or design tools like Figma; PNG, WebP or JPEG at 512px; or an ICO favicon with 16, 32 and 48px inside. Each one uses what you set in Customize.
CC0 puts the icons in the public domain: use them anywhere, with no conditions. The full terms are in the license, linked on this page.
No. CC0 gives the icons to the public domain, so no credit and no notice is required. Icons installed with the shadcn CLI still start with a comment naming SVG Logos, Gil Barbara and the license.
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
Its tags are media, social, web, content, metadata and SEO. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for Open Graph in another set.
4.9 out of 5 from 150+ developers
Install Open Graph from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro