vaadin logo
vaadin from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- vaadin
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
The same logo in other sets
Use the vaadin logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M1.166.521C.506.521 0 1.055 0 1.715v1.97c0 2.316 1.054 3.473 3.502 3.473h5.43c1.623 0 1.783.685 1.783 1.35q0 .1.012.193a1.268 1.268 0 0 0 2.531-.004c.007-.062.012-.121.012-.19c0-.664.16-1.349 1.783-1.349h5.43C22.93 7.158 24 6.001 24 3.686V1.715c0-.66-.524-1.194-1.184-1.194s-1.189.534-1.189 1.194l-.004.685c0 .746-.476 1.27-1.594 1.27h-5.322c-2.422 0-2.608 1.796-2.687 2.748h-.055c-.08-.952-.266-2.748-2.688-2.748H3.955c-1.118 0-1.629-.544-1.629-1.29v-.665c0-.66-.5-1.194-1.16-1.194m5.875 10.553a1.586 1.586 0 0 0-1.375 2.371c1.657 3.06 3.308 6.13 4.967 9.184a1.415 1.415 0 0 0 2.586.02l.033-.06l4.945-9.142a1.587 1.587 0 0 0-1.377-2.373c-.702 0-1.179.345-1.502 1.082l-3.386 6.313l-3.383-6.305c-.326-.745-.805-1.09-1.508-1.09"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsVaadin(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M1.166.521C.506.521 0 1.055 0 1.715v1.97c0 2.316 1.054 3.473 3.502 3.473h5.43c1.623 0 1.783.685 1.783 1.35q0 .1.012.193a1.268 1.268 0 0 0 2.531-.004c.007-.062.012-.121.012-.19c0-.664.16-1.349 1.783-1.349h5.43C22.93 7.158 24 6.001 24 3.686V1.715c0-.66-.524-1.194-1.184-1.194s-1.189.534-1.189 1.194l-.004.685c0 .746-.476 1.27-1.594 1.27h-5.322c-2.422 0-2.608 1.796-2.687 2.748h-.055c-.08-.952-.266-2.748-2.688-2.748H3.955c-1.118 0-1.629-.544-1.629-1.29v-.665c0-.66-.5-1.194-1.16-1.194m5.875 10.553a1.586 1.586 0 0 0-1.375 2.371c1.657 3.06 3.308 6.13 4.967 9.184a1.415 1.415 0 0 0 2.586.02l.033-.06l4.945-9.142a1.587 1.587 0 0 0-1.377-2.373c-.702 0-1.179.345-1.502 1.082l-3.386 6.313l-3.383-6.305c-.326-.745-.805-1.09-1.508-1.09"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M1.166.521C.506.521 0 1.055 0 1.715v1.97c0 2.316 1.054 3.473 3.502 3.473h5.43c1.623 0 1.783.685 1.783 1.35q0 .1.012.193a1.268 1.268 0 0 0 2.531-.004c.007-.062.012-.121.012-.19c0-.664.16-1.349 1.783-1.349h5.43C22.93 7.158 24 6.001 24 3.686V1.715c0-.66-.524-1.194-1.184-1.194s-1.189.534-1.189 1.194l-.004.685c0 .746-.476 1.27-1.594 1.27h-5.322c-2.422 0-2.608 1.796-2.687 2.748h-.055c-.08-.952-.266-2.748-2.688-2.748H3.955c-1.118 0-1.629-.544-1.629-1.29v-.665c0-.66-.5-1.194-1.16-1.194m5.875 10.553a1.586 1.586 0 0 0-1.375 2.371c1.657 3.06 3.308 6.13 4.967 9.184a1.415 1.415 0 0 0 2.586.02l.033-.06l4.945-9.142a1.587 1.587 0 0 0-1.377-2.373c-.702 0-1.179.345-1.502 1.082l-3.386 6.313l-3.383-6.305c-.326-.745-.805-1.09-1.508-1.09"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M1.166.521C.506.521%200%201.055%200%201.715v1.97c0%202.316%201.054%203.473%203.502%203.473h5.43c1.623%200%201.783.685%201.783%201.35q0%20.1.012.193a1.268%201.268%200%200%200%202.531-.004c.007-.062.012-.121.012-.19c0-.664.16-1.349%201.783-1.349h5.43C22.93%207.158%2024%206.001%2024%203.686V1.715c0-.66-.524-1.194-1.184-1.194s-1.189.534-1.189%201.194l-.004.685c0%20.746-.476%201.27-1.594%201.27h-5.322c-2.422%200-2.608%201.796-2.687%202.748h-.055c-.08-.952-.266-2.748-2.688-2.748H3.955c-1.118%200-1.629-.544-1.629-1.29v-.665c0-.66-.5-1.194-1.16-1.194m5.875%2010.553a1.586%201.586%200%200%200-1.375%202.371c1.657%203.06%203.308%206.13%204.967%209.184a1.415%201.415%200%200%200%202.586.02l.033-.06l4.945-9.142a1.587%201.587%200%200%200-1.377-2.373c-.702%200-1.179.345-1.502%201.082l-3.386%206.313l-3.383-6.305c-.326-.745-.805-1.09-1.508-1.09%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M1.166.521C.506.521%200%201.055%200%201.715v1.97c0%202.316%201.054%203.473%203.502%203.473h5.43c1.623%200%201.783.685%201.783%201.35q0%20.1.012.193a1.268%201.268%200%200%200%202.531-.004c.007-.062.012-.121.012-.19c0-.664.16-1.349%201.783-1.349h5.43C22.93%207.158%2024%206.001%2024%203.686V1.715c0-.66-.524-1.194-1.184-1.194s-1.189.534-1.189%201.194l-.004.685c0%20.746-.476%201.27-1.594%201.27h-5.322c-2.422%200-2.608%201.796-2.687%202.748h-.055c-.08-.952-.266-2.748-2.688-2.748H3.955c-1.118%200-1.629-.544-1.629-1.29v-.665c0-.66-.5-1.194-1.16-1.194m5.875%2010.553a1.586%201.586%200%200%200-1.375%202.371c1.657%203.06%203.308%206.13%204.967%209.184a1.415%201.415%200%200%200%202.586.02l.033-.06l4.945-9.142a1.587%201.587%200%200%200-1.377-2.373c-.702%200-1.179.345-1.502%201.082l-3.386%206.313l-3.383-6.305c-.326-.745-.805-1.09-1.508-1.09%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/vaadin.svg?color=%231a73e8&size=48
