vaadin logo

vaadin from Font Awesome Brands by Dave Gandy · Brand · CC-BY-4.0 Attribution required.

Name: vaadin
Set: Font Awesome Brands
Style: Brand
Viewbox: 640×640
License: CC BY 4.0

The same logo in other sets

vaadinDevicon vaadinFont Awesome 6 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 640 640"><path fill="currentColor" d="M320.5 204.7c1.5-17.6 4.9-52.7 49.8-52.7h98.6c20.7 0 32.1-7.8 32.1-21.6v-12.3c0-12.2 9.3-22.1 21.5-22.1s21.5 9.9 21.5 22.1v36.5c0 42.9-21.5 62-66.8 62H376.7c-30.1 0-33 14.7-33 27.1c0 1.3-.1 2.5-.2 3.7c-.7 12.3-10.9 22.2-23.4 22.2s-22.7-9.8-23.4-22.2c-.1-1.2-.2-2.4-.2-3.7c0-12.3-3-27.1-33-27.1H162.8c-45.3 0-66.8-19.1-66.8-62v-36.5c0-12.2 9.4-22.1 21.6-22.1s21.5 9.9 21.5 22.1v12.3c0 13.8 11.4 21.6 32.1 21.6h98.6c44.8 0 48.3 35.1 49.8 52.7zM320 520c11.5 0 21.4-7 25.7-16.3c1.1-1.8 97.1-169.6 98.2-171.4c11.9-19.6-3.2-44.3-27.2-44.3c-13.9 0-23.3 6.4-29.8 20.3L320 426l-66.9-117.7c-6.4-13.9-15.9-20.3-29.8-20.3c-24 0-39.1 24.6-27.2 44.3c1.1 1.9 97.1 169.6 98.2 171.4c4.3 9.3 14.2 16.3 25.7 16.3"/></svg>

React

import type { SVGProps } from "react";

export function Fa7BrandsVaadin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320.5 204.7c1.5-17.6 4.9-52.7 49.8-52.7h98.6c20.7 0 32.1-7.8 32.1-21.6v-12.3c0-12.2 9.3-22.1 21.5-22.1s21.5 9.9 21.5 22.1v36.5c0 42.9-21.5 62-66.8 62H376.7c-30.1 0-33 14.7-33 27.1c0 1.3-.1 2.5-.2 3.7c-.7 12.3-10.9 22.2-23.4 22.2s-22.7-9.8-23.4-22.2c-.1-1.2-.2-2.4-.2-3.7c0-12.3-3-27.1-33-27.1H162.8c-45.3 0-66.8-19.1-66.8-62v-36.5c0-12.2 9.4-22.1 21.6-22.1s21.5 9.9 21.5 22.1v12.3c0 13.8 11.4 21.6 32.1 21.6h98.6c44.8 0 48.3 35.1 49.8 52.7zM320 520c11.5 0 21.4-7 25.7-16.3c1.1-1.8 97.1-169.6 98.2-171.4c11.9-19.6-3.2-44.3-27.2-44.3c-13.9 0-23.3 6.4-29.8 20.3L320 426l-66.9-117.7c-6.4-13.9-15.9-20.3-29.8-20.3c-24 0-39.1 24.6-27.2 44.3c1.1 1.9 97.1 169.6 98.2 171.4c4.3 9.3 14.2 16.3 25.7 16.3"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320.5 204.7c1.5-17.6 4.9-52.7 49.8-52.7h98.6c20.7 0 32.1-7.8 32.1-21.6v-12.3c0-12.2 9.3-22.1 21.5-22.1s21.5 9.9 21.5 22.1v36.5c0 42.9-21.5 62-66.8 62H376.7c-30.1 0-33 14.7-33 27.1c0 1.3-.1 2.5-.2 3.7c-.7 12.3-10.9 22.2-23.4 22.2s-22.7-9.8-23.4-22.2c-.1-1.2-.2-2.4-.2-3.7c0-12.3-3-27.1-33-27.1H162.8c-45.3 0-66.8-19.1-66.8-62v-36.5c0-12.2 9.4-22.1 21.6-22.1s21.5 9.9 21.5 22.1v12.3c0 13.8 11.4 21.6 32.1 21.6h98.6c44.8 0 48.3 35.1 49.8 52.7zM320 520c11.5 0 21.4-7 25.7-16.3c1.1-1.8 97.1-169.6 98.2-171.4c11.9-19.6-3.2-44.3-27.2-44.3c-13.9 0-23.3 6.4-29.8 20.3L320 426l-66.9-117.7c-6.4-13.9-15.9-20.3-29.8-20.3c-24 0-39.1 24.6-27.2 44.3c1.1 1.9 97.1 169.6 98.2 171.4c4.3 9.3 14.2 16.3 25.7 16.3"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320.5%20204.7c1.5-17.6%204.9-52.7%2049.8-52.7h98.6c20.7%200%2032.1-7.8%2032.1-21.6v-12.3c0-12.2%209.3-22.1%2021.5-22.1s21.5%209.9%2021.5%2022.1v36.5c0%2042.9-21.5%2062-66.8%2062H376.7c-30.1%200-33%2014.7-33%2027.1c0%201.3-.1%202.5-.2%203.7c-.7%2012.3-10.9%2022.2-23.4%2022.2s-22.7-9.8-23.4-22.2c-.1-1.2-.2-2.4-.2-3.7c0-12.3-3-27.1-33-27.1H162.8c-45.3%200-66.8-19.1-66.8-62v-36.5c0-12.2%209.4-22.1%2021.6-22.1s21.5%209.9%2021.5%2022.1v12.3c0%2013.8%2011.4%2021.6%2032.1%2021.6h98.6c44.8%200%2048.3%2035.1%2049.8%2052.7zM320%20520c11.5%200%2021.4-7%2025.7-16.3c1.1-1.8%2097.1-169.6%2098.2-171.4c11.9-19.6-3.2-44.3-27.2-44.3c-13.9%200-23.3%206.4-29.8%2020.3L320%20426l-66.9-117.7c-6.4-13.9-15.9-20.3-29.8-20.3c-24%200-39.1%2024.6-27.2%2044.3c1.1%201.9%2097.1%20169.6%2098.2%20171.4c4.3%209.3%2014.2%2016.3%2025.7%2016.3%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320.5%20204.7c1.5-17.6%204.9-52.7%2049.8-52.7h98.6c20.7%200%2032.1-7.8%2032.1-21.6v-12.3c0-12.2%209.3-22.1%2021.5-22.1s21.5%209.9%2021.5%2022.1v36.5c0%2042.9-21.5%2062-66.8%2062H376.7c-30.1%200-33%2014.7-33%2027.1c0%201.3-.1%202.5-.2%203.7c-.7%2012.3-10.9%2022.2-23.4%2022.2s-22.7-9.8-23.4-22.2c-.1-1.2-.2-2.4-.2-3.7c0-12.3-3-27.1-33-27.1H162.8c-45.3%200-66.8-19.1-66.8-62v-36.5c0-12.2%209.4-22.1%2021.6-22.1s21.5%209.9%2021.5%2022.1v12.3c0%2013.8%2011.4%2021.6%2032.1%2021.6h98.6c44.8%200%2048.3%2035.1%2049.8%2052.7zM320%20520c11.5%200%2021.4-7%2025.7-16.3c1.1-1.8%2097.1-169.6%2098.2-171.4c11.9-19.6-3.2-44.3-27.2-44.3c-13.9%200-23.3%206.4-29.8%2020.3L320%20426l-66.9-117.7c-6.4-13.9-15.9-20.3-29.8-20.3c-24%200-39.1%2024.6-27.2%2044.3c1.1%201.9%2097.1%20169.6%2098.2%20171.4c4.3%209.3%2014.2%2016.3%2025.7%2016.3%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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