vaadin logo

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

Name: vaadin
Set: Font Awesome 6 Brands
Style: Regular
Viewbox: 448×512
License: CC BY 4.0

The same logo in other sets

vaadinDevicon 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 448 512"><path fill="currentColor" d="M224.5 140.7c1.5-17.6 4.9-52.7 49.8-52.7h98.6c20.7 0 32.1-7.8 32.1-21.6V54.1c0-12.2 9.3-22.1 21.5-22.1S448 41.9 448 54.1v36.5c0 42.9-21.5 62-66.8 62H280.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.1H66.8c-45.3 0-66.8-19.1-66.8-62V54.1C0 41.9 9.4 32 21.6 32s21.5 9.9 21.5 22.1v12.3C43.1 80.2 54.5 88 75.2 88h98.6c44.8 0 48.3 35.1 49.8 52.7zM224 456c11.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.3L224 362l-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 Fa6BrandsVaadin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M224.5 140.7c1.5-17.6 4.9-52.7 49.8-52.7h98.6c20.7 0 32.1-7.8 32.1-21.6V54.1c0-12.2 9.3-22.1 21.5-22.1S448 41.9 448 54.1v36.5c0 42.9-21.5 62-66.8 62H280.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.1H66.8c-45.3 0-66.8-19.1-66.8-62V54.1C0 41.9 9.4 32 21.6 32s21.5 9.9 21.5 22.1v12.3C43.1 80.2 54.5 88 75.2 88h98.6c44.8 0 48.3 35.1 49.8 52.7zM224 456c11.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.3L224 362l-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 448 512"><path fill="currentColor" d="M224.5 140.7c1.5-17.6 4.9-52.7 49.8-52.7h98.6c20.7 0 32.1-7.8 32.1-21.6V54.1c0-12.2 9.3-22.1 21.5-22.1S448 41.9 448 54.1v36.5c0 42.9-21.5 62-66.8 62H280.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.1H66.8c-45.3 0-66.8-19.1-66.8-62V54.1C0 41.9 9.4 32 21.6 32s21.5 9.9 21.5 22.1v12.3C43.1 80.2 54.5 88 75.2 88h98.6c44.8 0 48.3 35.1 49.8 52.7zM224 456c11.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.3L224 362l-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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224.5%20140.7c1.5-17.6%204.9-52.7%2049.8-52.7h98.6c20.7%200%2032.1-7.8%2032.1-21.6V54.1c0-12.2%209.3-22.1%2021.5-22.1S448%2041.9%20448%2054.1v36.5c0%2042.9-21.5%2062-66.8%2062H280.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.1H66.8c-45.3%200-66.8-19.1-66.8-62V54.1C0%2041.9%209.4%2032%2021.6%2032s21.5%209.9%2021.5%2022.1v12.3C43.1%2080.2%2054.5%2088%2075.2%2088h98.6c44.8%200%2048.3%2035.1%2049.8%2052.7zM224%20456c11.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.3L224%20362l-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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224.5%20140.7c1.5-17.6%204.9-52.7%2049.8-52.7h98.6c20.7%200%2032.1-7.8%2032.1-21.6V54.1c0-12.2%209.3-22.1%2021.5-22.1S448%2041.9%20448%2054.1v36.5c0%2042.9-21.5%2062-66.8%2062H280.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.1H66.8c-45.3%200-66.8-19.1-66.8-62V54.1C0%2041.9%209.4%2032%2021.6%2032s21.5%209.9%2021.5%2022.1v12.3C43.1%2080.2%2054.5%2088%2075.2%2088h98.6c44.8%200%2048.3%2035.1%2049.8%2052.7zM224%20456c11.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.3L224%20362l-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/fa6-brands/vaadin.svg?color=%231a73e8&size=48