opa logo

opa from Material Icon Theme by Material Extensions · Color · MIT Free for personal and commercial use.

Name
opa
Set
Material Icon Theme
Style
Color
Viewbox
32×32
License
MIT

Use the opa logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#bdbdbd" d="M29.12 10.065c0-2.5-4.686-8.122-4.998-8.434c1.124 5.057.984 4.302 1.172 5.917a2.44 2.44 0 0 1-.1 1.261c-.78 1.802-3.572 2.817-3.572 2.817l4.373 3.749s3.125-3.124 3.125-5.31m-26.24 0c0-2.5 4.686-8.122 4.998-8.434c-1.124 5.057-.984 4.302-1.172 5.917a2.44 2.44 0 0 0 .1 1.261c.78 1.802 3.572 2.817 3.572 2.817l-4.373 3.749S2.88 12.25 2.88 10.065"/><path fill="#546e7a" d="M16 8c4.897 0 8.452 3.007 9.996 7.375V22s-3.124 2.122-4.998 3.371A31.7 31.7 0 0 0 16.312 30H16Z"/><path fill="#78909c" d="M16 8c-4.897 0-8.452 3.007-9.996 7.375V22s3.124 2.122 4.998 3.371A31.7 31.7 0 0 1 15.688 30H16Z"/><circle cx="16" cy="16" r="2" fill="#fafafa"/></svg>

React

import type { SVGProps } from "react";

export function MaterialIconThemeOpa(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#bdbdbd" d="M29.12 10.065c0-2.5-4.686-8.122-4.998-8.434c1.124 5.057.984 4.302 1.172 5.917a2.44 2.44 0 0 1-.1 1.261c-.78 1.802-3.572 2.817-3.572 2.817l4.373 3.749s3.125-3.124 3.125-5.31m-26.24 0c0-2.5 4.686-8.122 4.998-8.434c-1.124 5.057-.984 4.302-1.172 5.917a2.44 2.44 0 0 0 .1 1.261c.78 1.802 3.572 2.817 3.572 2.817l-4.373 3.749S2.88 12.25 2.88 10.065"/><path fill="#546e7a" d="M16 8c4.897 0 8.452 3.007 9.996 7.375V22s-3.124 2.122-4.998 3.371A31.7 31.7 0 0 0 16.312 30H16Z"/><path fill="#78909c" d="M16 8c-4.897 0-8.452 3.007-9.996 7.375V22s3.124 2.122 4.998 3.371A31.7 31.7 0 0 1 15.688 30H16Z"/><circle cx="16" cy="16" r="2" fill="#fafafa"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#bdbdbd" d="M29.12 10.065c0-2.5-4.686-8.122-4.998-8.434c1.124 5.057.984 4.302 1.172 5.917a2.44 2.44 0 0 1-.1 1.261c-.78 1.802-3.572 2.817-3.572 2.817l4.373 3.749s3.125-3.124 3.125-5.31m-26.24 0c0-2.5 4.686-8.122 4.998-8.434c-1.124 5.057-.984 4.302-1.172 5.917a2.44 2.44 0 0 0 .1 1.261c.78 1.802 3.572 2.817 3.572 2.817l-4.373 3.749S2.88 12.25 2.88 10.065"/><path fill="#546e7a" d="M16 8c4.897 0 8.452 3.007 9.996 7.375V22s-3.124 2.122-4.998 3.371A31.7 31.7 0 0 0 16.312 30H16Z"/><path fill="#78909c" d="M16 8c-4.897 0-8.452 3.007-9.996 7.375V22s3.124 2.122 4.998 3.371A31.7 31.7 0 0 1 15.688 30H16Z"/><circle cx="16" cy="16" r="2" fill="#fafafa"/></svg>
</template>

CSS

.icon-opa {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23bdbdbd%22%20d%3D%22M29.12%2010.065c0-2.5-4.686-8.122-4.998-8.434c1.124%205.057.984%204.302%201.172%205.917a2.44%202.44%200%200%201-.1%201.261c-.78%201.802-3.572%202.817-3.572%202.817l4.373%203.749s3.125-3.124%203.125-5.31m-26.24%200c0-2.5%204.686-8.122%204.998-8.434c-1.124%205.057-.984%204.302-1.172%205.917a2.44%202.44%200%200%200%20.1%201.261c.78%201.802%203.572%202.817%203.572%202.817l-4.373%203.749S2.88%2012.25%202.88%2010.065%22%2F%3E%3Cpath%20fill%3D%22%23546e7a%22%20d%3D%22M16%208c4.897%200%208.452%203.007%209.996%207.375V22s-3.124%202.122-4.998%203.371A31.7%2031.7%200%200%200%2016.312%2030H16Z%22%2F%3E%3Cpath%20fill%3D%22%2378909c%22%20d%3D%22M16%208c-4.897%200-8.452%203.007-9.996%207.375V22s3.124%202.122%204.998%203.371A31.7%2031.7%200%200%201%2015.688%2030H16Z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%23fafafa%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23bdbdbd%22%20d%3D%22M29.12%2010.065c0-2.5-4.686-8.122-4.998-8.434c1.124%205.057.984%204.302%201.172%205.917a2.44%202.44%200%200%201-.1%201.261c-.78%201.802-3.572%202.817-3.572%202.817l4.373%203.749s3.125-3.124%203.125-5.31m-26.24%200c0-2.5%204.686-8.122%204.998-8.434c-1.124%205.057-.984%204.302-1.172%205.917a2.44%202.44%200%200%200%20.1%201.261c.78%201.802%203.572%202.817%203.572%202.817l-4.373%203.749S2.88%2012.25%202.88%2010.065%22%2F%3E%3Cpath%20fill%3D%22%23546e7a%22%20d%3D%22M16%208c4.897%200%208.452%203.007%209.996%207.375V22s-3.124%202.122-4.998%203.371A31.7%2031.7%200%200%200%2016.312%2030H16Z%22%2F%3E%3Cpath%20fill%3D%22%2378909c%22%20d%3D%22M16%208c-4.897%200-8.452%203.007-9.996%207.375V22s3.124%202.122%204.998%203.371A31.7%2031.7%200%200%201%2015.688%2030H16Z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%23fafafa%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-icon-theme/opa.svg?color=%231a73e8&size=48