vaadin logo

vaadin from Devicon by konpa · Original · MIT Free for personal and commercial use.

Name: vaadin
Set: Devicon
Style: Original
Viewbox: 128×128
License: MIT

1 other variant in Devicon

The same logo in other sets

vaadinFont Awesome 6 Brands vaadinFont Awesome Brands vaadinLine Awesome vaadinSVG Logos vaadinSimple Icons

Use the vaadin logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#00b4f0" d="M64.25 125.543a7.56 7.56 0 0 0 6.883-4.438l.18-.316L97.71 71.934a8.46 8.46 0 0 0-.008-8.465a8.48 8.48 0 0 0-7.34-4.219c-3.754 0-6.3 1.848-8.027 5.785L64.234 98.781L46.148 65.086c-1.664-3.988-4.289-5.82-8.046-5.82a8.46 8.46 0 0 0-7.325 4.218a8.46 8.46 0 0 0-.023 8.45l26.43 48.921l.117.22a7.56 7.56 0 0 0 6.949 4.534m.016-72.625a6.75 6.75 0 0 0 6.75-6.75V44.57a6.42 6.42 0 0 1 6.418-6.383h34.574a16.42 16.42 0 0 0 16.441-16.422V9.114a6.324 6.324 0 0 0-4.715-6.07a6.325 6.325 0 0 0-7.09 2.98a6.3 6.3 0 0 0-.796 3.075v4.007a6.41 6.41 0 0 1-6.485 6.348H78.13a13.51 13.51 0 0 0-13.297 11.488a20 20 0 0 0-.332 3.325h-.285a20 20 0 0 0-.332-3.325a13.51 13.51 0 0 0-13.297-11.468h-31.52a6.42 6.42 0 0 1-6.418-6.336V9.164a6.25 6.25 0 0 0-.812-3.008A6.317 6.317 0 0 0 0 9.18v12.653c.008 9.07 7.371 16.414 16.441 16.406h34.575a6.42 6.42 0 0 1 6.418 6.383v1.664a6.75 6.75 0 0 0 6.75 6.75h.082Zm0 0"/></svg>

React

import type { SVGProps } from "react";

export function DeviconVaadin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#00b4f0" d="M64.25 125.543a7.56 7.56 0 0 0 6.883-4.438l.18-.316L97.71 71.934a8.46 8.46 0 0 0-.008-8.465a8.48 8.48 0 0 0-7.34-4.219c-3.754 0-6.3 1.848-8.027 5.785L64.234 98.781L46.148 65.086c-1.664-3.988-4.289-5.82-8.046-5.82a8.46 8.46 0 0 0-7.325 4.218a8.46 8.46 0 0 0-.023 8.45l26.43 48.921l.117.22a7.56 7.56 0 0 0 6.949 4.534m.016-72.625a6.75 6.75 0 0 0 6.75-6.75V44.57a6.42 6.42 0 0 1 6.418-6.383h34.574a16.42 16.42 0 0 0 16.441-16.422V9.114a6.324 6.324 0 0 0-4.715-6.07a6.325 6.325 0 0 0-7.09 2.98a6.3 6.3 0 0 0-.796 3.075v4.007a6.41 6.41 0 0 1-6.485 6.348H78.13a13.51 13.51 0 0 0-13.297 11.488a20 20 0 0 0-.332 3.325h-.285a20 20 0 0 0-.332-3.325a13.51 13.51 0 0 0-13.297-11.468h-31.52a6.42 6.42 0 0 1-6.418-6.336V9.164a6.25 6.25 0 0 0-.812-3.008A6.317 6.317 0 0 0 0 9.18v12.653c.008 9.07 7.371 16.414 16.441 16.406h34.575a6.42 6.42 0 0 1 6.418 6.383v1.664a6.75 6.75 0 0 0 6.75 6.75h.082Zm0 0"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#00b4f0" d="M64.25 125.543a7.56 7.56 0 0 0 6.883-4.438l.18-.316L97.71 71.934a8.46 8.46 0 0 0-.008-8.465a8.48 8.48 0 0 0-7.34-4.219c-3.754 0-6.3 1.848-8.027 5.785L64.234 98.781L46.148 65.086c-1.664-3.988-4.289-5.82-8.046-5.82a8.46 8.46 0 0 0-7.325 4.218a8.46 8.46 0 0 0-.023 8.45l26.43 48.921l.117.22a7.56 7.56 0 0 0 6.949 4.534m.016-72.625a6.75 6.75 0 0 0 6.75-6.75V44.57a6.42 6.42 0 0 1 6.418-6.383h34.574a16.42 16.42 0 0 0 16.441-16.422V9.114a6.324 6.324 0 0 0-4.715-6.07a6.325 6.325 0 0 0-7.09 2.98a6.3 6.3 0 0 0-.796 3.075v4.007a6.41 6.41 0 0 1-6.485 6.348H78.13a13.51 13.51 0 0 0-13.297 11.488a20 20 0 0 0-.332 3.325h-.285a20 20 0 0 0-.332-3.325a13.51 13.51 0 0 0-13.297-11.468h-31.52a6.42 6.42 0 0 1-6.418-6.336V9.164a6.25 6.25 0 0 0-.812-3.008A6.317 6.317 0 0 0 0 9.18v12.653c.008 9.07 7.371 16.414 16.441 16.406h34.575a6.42 6.42 0 0 1 6.418 6.383v1.664a6.75 6.75 0 0 0 6.75 6.75h.082Zm0 0"/></svg>
</template>

CSS

.icon-vaadin {
  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%20128%20128%22%3E%3Cpath%20fill%3D%22%2300b4f0%22%20d%3D%22M64.25%20125.543a7.56%207.56%200%200%200%206.883-4.438l.18-.316L97.71%2071.934a8.46%208.46%200%200%200-.008-8.465a8.48%208.48%200%200%200-7.34-4.219c-3.754%200-6.3%201.848-8.027%205.785L64.234%2098.781L46.148%2065.086c-1.664-3.988-4.289-5.82-8.046-5.82a8.46%208.46%200%200%200-7.325%204.218a8.46%208.46%200%200%200-.023%208.45l26.43%2048.921l.117.22a7.56%207.56%200%200%200%206.949%204.534m.016-72.625a6.75%206.75%200%200%200%206.75-6.75V44.57a6.42%206.42%200%200%201%206.418-6.383h34.574a16.42%2016.42%200%200%200%2016.441-16.422V9.114a6.324%206.324%200%200%200-4.715-6.07a6.325%206.325%200%200%200-7.09%202.98a6.3%206.3%200%200%200-.796%203.075v4.007a6.41%206.41%200%200%201-6.485%206.348H78.13a13.51%2013.51%200%200%200-13.297%2011.488a20%2020%200%200%200-.332%203.325h-.285a20%2020%200%200%200-.332-3.325a13.51%2013.51%200%200%200-13.297-11.468h-31.52a6.42%206.42%200%200%201-6.418-6.336V9.164a6.25%206.25%200%200%200-.812-3.008A6.317%206.317%200%200%200%200%209.18v12.653c.008%209.07%207.371%2016.414%2016.441%2016.406h34.575a6.42%206.42%200%200%201%206.418%206.383v1.664a6.75%206.75%200%200%200%206.75%206.75h.082Zm0%200%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%20128%20128%22%3E%3Cpath%20fill%3D%22%2300b4f0%22%20d%3D%22M64.25%20125.543a7.56%207.56%200%200%200%206.883-4.438l.18-.316L97.71%2071.934a8.46%208.46%200%200%200-.008-8.465a8.48%208.48%200%200%200-7.34-4.219c-3.754%200-6.3%201.848-8.027%205.785L64.234%2098.781L46.148%2065.086c-1.664-3.988-4.289-5.82-8.046-5.82a8.46%208.46%200%200%200-7.325%204.218a8.46%208.46%200%200%200-.023%208.45l26.43%2048.921l.117.22a7.56%207.56%200%200%200%206.949%204.534m.016-72.625a6.75%206.75%200%200%200%206.75-6.75V44.57a6.42%206.42%200%200%201%206.418-6.383h34.574a16.42%2016.42%200%200%200%2016.441-16.422V9.114a6.324%206.324%200%200%200-4.715-6.07a6.325%206.325%200%200%200-7.09%202.98a6.3%206.3%200%200%200-.796%203.075v4.007a6.41%206.41%200%200%201-6.485%206.348H78.13a13.51%2013.51%200%200%200-13.297%2011.488a20%2020%200%200%200-.332%203.325h-.285a20%2020%200%200%200-.332-3.325a13.51%2013.51%200%200%200-13.297-11.468h-31.52a6.42%206.42%200%200%201-6.418-6.336V9.164a6.25%206.25%200%200%200-.812-3.008A6.317%206.317%200%200%200%200%209.18v12.653c.008%209.07%207.371%2016.414%2016.441%2016.406h34.575a6.42%206.42%200%200%201%206.418%206.383v1.664a6.75%206.75%200%200%200%206.75%206.75h.082Zm0%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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