cabal logo

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

Name
cabal
Set
Material Icon Theme
Style
Color
Viewbox
300×300
License
MIT

The same logo in other sets

cabalCatppuccin Icons

Use the cabal logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 300 300"><g transform="translate(0 -822.52)"><rect width="107.25" height="156.59" x="405.55" y="967.22" fill="#0097a7" rx="12.306" ry="12.31" transform="matrix(-.98339 .18149 .60192 .79856 0 0)"/><rect width="108.34" height="123.15" x="-1156.5" y="1461.9" fill="#3f51b5" rx="10.69" ry="12.31" transform="matrix(-.98528 .17093 -.59175 .80612 0 0)"/><path fill="#3f51b5" d="M52.112 965.158c-1.343 3.515-26.292 23.248-25.744 27.277c.548 4.03 29.812 16.023 32.04 19.027s10.545 41.668 13.603 42.5s18.828-31.274 21.548-32.932s32.808 2.503 34.15-1.01c1.343-3.515-18.174-35.352-18.721-39.381s9.732-40.12 7.502-43.125s-30.06 9.427-33.118 8.594s-26.793-27.3-29.514-25.643s-.405 41.177-1.747 44.693z"/></g></svg>

React

import type { SVGProps } from "react";

export function MaterialIconThemeCabal(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 300 300"><g transform="translate(0 -822.52)"><rect width="107.25" height="156.59" x="405.55" y="967.22" fill="#0097a7" rx="12.306" ry="12.31" transform="matrix(-.98339 .18149 .60192 .79856 0 0)"/><rect width="108.34" height="123.15" x="-1156.5" y="1461.9" fill="#3f51b5" rx="10.69" ry="12.31" transform="matrix(-.98528 .17093 -.59175 .80612 0 0)"/><path fill="#3f51b5" d="M52.112 965.158c-1.343 3.515-26.292 23.248-25.744 27.277c.548 4.03 29.812 16.023 32.04 19.027s10.545 41.668 13.603 42.5s18.828-31.274 21.548-32.932s32.808 2.503 34.15-1.01c1.343-3.515-18.174-35.352-18.721-39.381s9.732-40.12 7.502-43.125s-30.06 9.427-33.118 8.594s-26.793-27.3-29.514-25.643s-.405 41.177-1.747 44.693z"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 300 300"><g transform="translate(0 -822.52)"><rect width="107.25" height="156.59" x="405.55" y="967.22" fill="#0097a7" rx="12.306" ry="12.31" transform="matrix(-.98339 .18149 .60192 .79856 0 0)"/><rect width="108.34" height="123.15" x="-1156.5" y="1461.9" fill="#3f51b5" rx="10.69" ry="12.31" transform="matrix(-.98528 .17093 -.59175 .80612 0 0)"/><path fill="#3f51b5" d="M52.112 965.158c-1.343 3.515-26.292 23.248-25.744 27.277c.548 4.03 29.812 16.023 32.04 19.027s10.545 41.668 13.603 42.5s18.828-31.274 21.548-32.932s32.808 2.503 34.15-1.01c1.343-3.515-18.174-35.352-18.721-39.381s9.732-40.12 7.502-43.125s-30.06 9.427-33.118 8.594s-26.793-27.3-29.514-25.643s-.405 41.177-1.747 44.693z"/></g></svg>
</template>

CSS

.icon-cabal {
  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%20300%20300%22%3E%3Cg%20transform%3D%22translate(0%20-822.52)%22%3E%3Crect%20width%3D%22107.25%22%20height%3D%22156.59%22%20x%3D%22405.55%22%20y%3D%22967.22%22%20fill%3D%22%230097a7%22%20rx%3D%2212.306%22%20ry%3D%2212.31%22%20transform%3D%22matrix(-.98339%20.18149%20.60192%20.79856%200%200)%22%2F%3E%3Crect%20width%3D%22108.34%22%20height%3D%22123.15%22%20x%3D%22-1156.5%22%20y%3D%221461.9%22%20fill%3D%22%233f51b5%22%20rx%3D%2210.69%22%20ry%3D%2212.31%22%20transform%3D%22matrix(-.98528%20.17093%20-.59175%20.80612%200%200)%22%2F%3E%3Cpath%20fill%3D%22%233f51b5%22%20d%3D%22M52.112%20965.158c-1.343%203.515-26.292%2023.248-25.744%2027.277c.548%204.03%2029.812%2016.023%2032.04%2019.027s10.545%2041.668%2013.603%2042.5s18.828-31.274%2021.548-32.932s32.808%202.503%2034.15-1.01c1.343-3.515-18.174-35.352-18.721-39.381s9.732-40.12%207.502-43.125s-30.06%209.427-33.118%208.594s-26.793-27.3-29.514-25.643s-.405%2041.177-1.747%2044.693z%22%2F%3E%3C%2Fg%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%20300%20300%22%3E%3Cg%20transform%3D%22translate(0%20-822.52)%22%3E%3Crect%20width%3D%22107.25%22%20height%3D%22156.59%22%20x%3D%22405.55%22%20y%3D%22967.22%22%20fill%3D%22%230097a7%22%20rx%3D%2212.306%22%20ry%3D%2212.31%22%20transform%3D%22matrix(-.98339%20.18149%20.60192%20.79856%200%200)%22%2F%3E%3Crect%20width%3D%22108.34%22%20height%3D%22123.15%22%20x%3D%22-1156.5%22%20y%3D%221461.9%22%20fill%3D%22%233f51b5%22%20rx%3D%2210.69%22%20ry%3D%2212.31%22%20transform%3D%22matrix(-.98528%20.17093%20-.59175%20.80612%200%200)%22%2F%3E%3Cpath%20fill%3D%22%233f51b5%22%20d%3D%22M52.112%20965.158c-1.343%203.515-26.292%2023.248-25.744%2027.277c.548%204.03%2029.812%2016.023%2032.04%2019.027s10.545%2041.668%2013.603%2042.5s18.828-31.274%2021.548-32.932s32.808%202.503%2034.15-1.01c1.343-3.515-18.174-35.352-18.721-39.381s9.732-40.12%207.502-43.125s-30.06%209.427-33.118%208.594s-26.793-27.3-29.514-25.643s-.405%2041.177-1.747%2044.693z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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