flat ui logo

Use the flat ui logo

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 194"><defs><clipPath id="SVGYCgH7cwt"><path d="M68.367 0a13.65 13.65 0 0 0-9.664 4.011L2.087 60.783a7.15 7.15 0 0 0 .004 10.102l120.668 120.836a7.15 7.15 0 0 0 10.112.007L253.903 70.864a7.15 7.15 0 0 0 .03-10.087L197.836 4.052A13.64 13.64 0 0 0 188.132 0z"/></clipPath></defs><g clip-path="url(#SVGYCgH7cwt)"><path fill="#57bbfb" d="M65.4-.004h125.718a6.5 6.5 0 0 1 4.62 1.93l63.2 63.906l-131.125 130.944L-2.95 65.832L60.8 1.905a6.5 6.5 0 0 1 4.6-1.909"/><path fill="#48acec" d="M194.649 1.045a6.5 6.5 0 0 0-3.531-1.05H65.4a6.5 6.5 0 0 0-4.602 1.91l2.086 2.638l31.919 31.372l66.29-.273z"/><path fill="#2b8fcf" d="m128.405 196.185l-.592.592L-2.95 65.832l1.104-1.106H67.25l61.154 127.777z"/><path fill="#2d91d1" d="m84.478 109.075l10.873 22.05h65.567l10.776-21.548l-44.206-43.935z"/><path fill="#7acbff" d="M193.848 65.642h64.931L193.375.042l-32.826 32.683z"/><path fill="#55b9f9" d="M160.549 32.726L127.904.456L95.162 33.284l32.327 32.36z"/><path fill="#3b9fdf" d="M127.488 65.642H62.886l21.592 43.44l43.01-43.435l44.207 43.936l22.153-43.94z"/><path fill="#52b6f7" d="M62.886 65.642h64.602l-32.326-32.36z"/><path fill="#8fd3ff" d="m160.549 32.726l-33.06 32.917h66.359v-.001z"/><path fill="#ff2690" d="M160.549 32.726L127.904.456z"/><path fill="#41a5e5" d="M95.162 33.283L62.636.723l-65.54 64.92h65.79v-.001z"/><path fill="#3ca0e0" d="m127.903 197.14l33.015-66.015H95.351z"/><path fill="#4eb2f2" d="m171.695 109.578l-10.776 21.548h32.457z"/><path fill="#1a7ebe" d="M62.643 131.125h32.708l-10.873-22.05z"/><path fill="#fff" d="M177.459 65.124c5.336-1.131 15.08-10.956 15.932-15.768c.044-.248.445-.245.517-.005c1.464 4.915 11.434 14.847 15.844 15.773c.258.054.288.902.03.96c-4.556 1.032-14.488 11.062-15.86 15.85c-.075.26-.494.263-.557-.001c-1.09-4.555-10.807-14.497-15.937-15.85c-.257-.067-.23-.904.03-.96"/></g></svg>

import type { SVGProps } from "react";

export function LogosFlatUi(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 194"><defs><clipPath id="SVGYCgH7cwt"><path d="M68.367 0a13.65 13.65 0 0 0-9.664 4.011L2.087 60.783a7.15 7.15 0 0 0 .004 10.102l120.668 120.836a7.15 7.15 0 0 0 10.112.007L253.903 70.864a7.15 7.15 0 0 0 .03-10.087L197.836 4.052A13.64 13.64 0 0 0 188.132 0z"/></clipPath></defs><g clipPath="url(#SVGYCgH7cwt)"><path fill="#57bbfb" d="M65.4-.004h125.718a6.5 6.5 0 0 1 4.62 1.93l63.2 63.906l-131.125 130.944L-2.95 65.832L60.8 1.905a6.5 6.5 0 0 1 4.6-1.909"/><path fill="#48acec" d="M194.649 1.045a6.5 6.5 0 0 0-3.531-1.05H65.4a6.5 6.5 0 0 0-4.602 1.91l2.086 2.638l31.919 31.372l66.29-.273z"/><path fill="#2b8fcf" d="m128.405 196.185l-.592.592L-2.95 65.832l1.104-1.106H67.25l61.154 127.777z"/><path fill="#2d91d1" d="m84.478 109.075l10.873 22.05h65.567l10.776-21.548l-44.206-43.935z"/><path fill="#7acbff" d="M193.848 65.642h64.931L193.375.042l-32.826 32.683z"/><path fill="#55b9f9" d="M160.549 32.726L127.904.456L95.162 33.284l32.327 32.36z"/><path fill="#3b9fdf" d="M127.488 65.642H62.886l21.592 43.44l43.01-43.435l44.207 43.936l22.153-43.94z"/><path fill="#52b6f7" d="M62.886 65.642h64.602l-32.326-32.36z"/><path fill="#8fd3ff" d="m160.549 32.726l-33.06 32.917h66.359v-.001z"/><path fill="#ff2690" d="M160.549 32.726L127.904.456z"/><path fill="#41a5e5" d="M95.162 33.283L62.636.723l-65.54 64.92h65.79v-.001z"/><path fill="#3ca0e0" d="m127.903 197.14l33.015-66.015H95.351z"/><path fill="#4eb2f2" d="m171.695 109.578l-10.776 21.548h32.457z"/><path fill="#1a7ebe" d="M62.643 131.125h32.708l-10.873-22.05z"/><path fill="#fff" d="M177.459 65.124c5.336-1.131 15.08-10.956 15.932-15.768c.044-.248.445-.245.517-.005c1.464 4.915 11.434 14.847 15.844 15.773c.258.054.288.902.03.96c-4.556 1.032-14.488 11.062-15.86 15.85c-.075.26-.494.263-.557-.001c-1.09-4.555-10.807-14.497-15.937-15.85c-.257-.067-.23-.904.03-.96"/></g></svg>
  );
}

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 194"><defs><clipPath id="SVGYCgH7cwt"><path d="M68.367 0a13.65 13.65 0 0 0-9.664 4.011L2.087 60.783a7.15 7.15 0 0 0 .004 10.102l120.668 120.836a7.15 7.15 0 0 0 10.112.007L253.903 70.864a7.15 7.15 0 0 0 .03-10.087L197.836 4.052A13.64 13.64 0 0 0 188.132 0z"/></clipPath></defs><g clip-path="url(#SVGYCgH7cwt)"><path fill="#57bbfb" d="M65.4-.004h125.718a6.5 6.5 0 0 1 4.62 1.93l63.2 63.906l-131.125 130.944L-2.95 65.832L60.8 1.905a6.5 6.5 0 0 1 4.6-1.909"/><path fill="#48acec" d="M194.649 1.045a6.5 6.5 0 0 0-3.531-1.05H65.4a6.5 6.5 0 0 0-4.602 1.91l2.086 2.638l31.919 31.372l66.29-.273z"/><path fill="#2b8fcf" d="m128.405 196.185l-.592.592L-2.95 65.832l1.104-1.106H67.25l61.154 127.777z"/><path fill="#2d91d1" d="m84.478 109.075l10.873 22.05h65.567l10.776-21.548l-44.206-43.935z"/><path fill="#7acbff" d="M193.848 65.642h64.931L193.375.042l-32.826 32.683z"/><path fill="#55b9f9" d="M160.549 32.726L127.904.456L95.162 33.284l32.327 32.36z"/><path fill="#3b9fdf" d="M127.488 65.642H62.886l21.592 43.44l43.01-43.435l44.207 43.936l22.153-43.94z"/><path fill="#52b6f7" d="M62.886 65.642h64.602l-32.326-32.36z"/><path fill="#8fd3ff" d="m160.549 32.726l-33.06 32.917h66.359v-.001z"/><path fill="#ff2690" d="M160.549 32.726L127.904.456z"/><path fill="#41a5e5" d="M95.162 33.283L62.636.723l-65.54 64.92h65.79v-.001z"/><path fill="#3ca0e0" d="m127.903 197.14l33.015-66.015H95.351z"/><path fill="#4eb2f2" d="m171.695 109.578l-10.776 21.548h32.457z"/><path fill="#1a7ebe" d="M62.643 131.125h32.708l-10.873-22.05z"/><path fill="#fff" d="M177.459 65.124c5.336-1.131 15.08-10.956 15.932-15.768c.044-.248.445-.245.517-.005c1.464 4.915 11.434 14.847 15.844 15.773c.258.054.288.902.03.96c-4.556 1.032-14.488 11.062-15.86 15.85c-.075.26-.494.263-.557-.001c-1.09-4.555-10.807-14.497-15.937-15.85c-.257-.067-.23-.904.03-.96"/></g></svg>
</template>

.icon-flat-ui {
  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%20256%20194%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGYCgH7cwt%22%3E%3Cpath%20d%3D%22M68.367%200a13.65%2013.65%200%200%200-9.664%204.011L2.087%2060.783a7.15%207.15%200%200%200%20.004%2010.102l120.668%20120.836a7.15%207.15%200%200%200%2010.112.007L253.903%2070.864a7.15%207.15%200%200%200%20.03-10.087L197.836%204.052A13.64%2013.64%200%200%200%20188.132%200z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23SVGYCgH7cwt)%22%3E%3Cpath%20fill%3D%22%2357bbfb%22%20d%3D%22M65.4-.004h125.718a6.5%206.5%200%200%201%204.62%201.93l63.2%2063.906l-131.125%20130.944L-2.95%2065.832L60.8%201.905a6.5%206.5%200%200%201%204.6-1.909%22%2F%3E%3Cpath%20fill%3D%22%2348acec%22%20d%3D%22M194.649%201.045a6.5%206.5%200%200%200-3.531-1.05H65.4a6.5%206.5%200%200%200-4.602%201.91l2.086%202.638l31.919%2031.372l66.29-.273z%22%2F%3E%3Cpath%20fill%3D%22%232b8fcf%22%20d%3D%22m128.405%20196.185l-.592.592L-2.95%2065.832l1.104-1.106H67.25l61.154%20127.777z%22%2F%3E%3Cpath%20fill%3D%22%232d91d1%22%20d%3D%22m84.478%20109.075l10.873%2022.05h65.567l10.776-21.548l-44.206-43.935z%22%2F%3E%3Cpath%20fill%3D%22%237acbff%22%20d%3D%22M193.848%2065.642h64.931L193.375.042l-32.826%2032.683z%22%2F%3E%3Cpath%20fill%3D%22%2355b9f9%22%20d%3D%22M160.549%2032.726L127.904.456L95.162%2033.284l32.327%2032.36z%22%2F%3E%3Cpath%20fill%3D%22%233b9fdf%22%20d%3D%22M127.488%2065.642H62.886l21.592%2043.44l43.01-43.435l44.207%2043.936l22.153-43.94z%22%2F%3E%3Cpath%20fill%3D%22%2352b6f7%22%20d%3D%22M62.886%2065.642h64.602l-32.326-32.36z%22%2F%3E%3Cpath%20fill%3D%22%238fd3ff%22%20d%3D%22m160.549%2032.726l-33.06%2032.917h66.359v-.001z%22%2F%3E%3Cpath%20fill%3D%22%23ff2690%22%20d%3D%22M160.549%2032.726L127.904.456z%22%2F%3E%3Cpath%20fill%3D%22%2341a5e5%22%20d%3D%22M95.162%2033.283L62.636.723l-65.54%2064.92h65.79v-.001z%22%2F%3E%3Cpath%20fill%3D%22%233ca0e0%22%20d%3D%22m127.903%20197.14l33.015-66.015H95.351z%22%2F%3E%3Cpath%20fill%3D%22%234eb2f2%22%20d%3D%22m171.695%20109.578l-10.776%2021.548h32.457z%22%2F%3E%3Cpath%20fill%3D%22%231a7ebe%22%20d%3D%22M62.643%20131.125h32.708l-10.873-22.05z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M177.459%2065.124c5.336-1.131%2015.08-10.956%2015.932-15.768c.044-.248.445-.245.517-.005c1.464%204.915%2011.434%2014.847%2015.844%2015.773c.258.054.288.902.03.96c-4.556%201.032-14.488%2011.062-15.86%2015.85c-.075.26-.494.263-.557-.001c-1.09-4.555-10.807-14.497-15.937-15.85c-.257-.067-.23-.904.03-.96%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%20256%20194%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGYCgH7cwt%22%3E%3Cpath%20d%3D%22M68.367%200a13.65%2013.65%200%200%200-9.664%204.011L2.087%2060.783a7.15%207.15%200%200%200%20.004%2010.102l120.668%20120.836a7.15%207.15%200%200%200%2010.112.007L253.903%2070.864a7.15%207.15%200%200%200%20.03-10.087L197.836%204.052A13.64%2013.64%200%200%200%20188.132%200z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23SVGYCgH7cwt)%22%3E%3Cpath%20fill%3D%22%2357bbfb%22%20d%3D%22M65.4-.004h125.718a6.5%206.5%200%200%201%204.62%201.93l63.2%2063.906l-131.125%20130.944L-2.95%2065.832L60.8%201.905a6.5%206.5%200%200%201%204.6-1.909%22%2F%3E%3Cpath%20fill%3D%22%2348acec%22%20d%3D%22M194.649%201.045a6.5%206.5%200%200%200-3.531-1.05H65.4a6.5%206.5%200%200%200-4.602%201.91l2.086%202.638l31.919%2031.372l66.29-.273z%22%2F%3E%3Cpath%20fill%3D%22%232b8fcf%22%20d%3D%22m128.405%20196.185l-.592.592L-2.95%2065.832l1.104-1.106H67.25l61.154%20127.777z%22%2F%3E%3Cpath%20fill%3D%22%232d91d1%22%20d%3D%22m84.478%20109.075l10.873%2022.05h65.567l10.776-21.548l-44.206-43.935z%22%2F%3E%3Cpath%20fill%3D%22%237acbff%22%20d%3D%22M193.848%2065.642h64.931L193.375.042l-32.826%2032.683z%22%2F%3E%3Cpath%20fill%3D%22%2355b9f9%22%20d%3D%22M160.549%2032.726L127.904.456L95.162%2033.284l32.327%2032.36z%22%2F%3E%3Cpath%20fill%3D%22%233b9fdf%22%20d%3D%22M127.488%2065.642H62.886l21.592%2043.44l43.01-43.435l44.207%2043.936l22.153-43.94z%22%2F%3E%3Cpath%20fill%3D%22%2352b6f7%22%20d%3D%22M62.886%2065.642h64.602l-32.326-32.36z%22%2F%3E%3Cpath%20fill%3D%22%238fd3ff%22%20d%3D%22m160.549%2032.726l-33.06%2032.917h66.359v-.001z%22%2F%3E%3Cpath%20fill%3D%22%23ff2690%22%20d%3D%22M160.549%2032.726L127.904.456z%22%2F%3E%3Cpath%20fill%3D%22%2341a5e5%22%20d%3D%22M95.162%2033.283L62.636.723l-65.54%2064.92h65.79v-.001z%22%2F%3E%3Cpath%20fill%3D%22%233ca0e0%22%20d%3D%22m127.903%20197.14l33.015-66.015H95.351z%22%2F%3E%3Cpath%20fill%3D%22%234eb2f2%22%20d%3D%22m171.695%20109.578l-10.776%2021.548h32.457z%22%2F%3E%3Cpath%20fill%3D%22%231a7ebe%22%20d%3D%22M62.643%20131.125h32.708l-10.873-22.05z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M177.459%2065.124c5.336-1.131%2015.08-10.956%2015.932-15.768c.044-.248.445-.245.517-.005c1.464%204.915%2011.434%2014.847%2015.844%2015.773c.258.054.288.902.03.96c-4.556%201.032-14.488%2011.062-15.86%2015.85c-.075.26-.494.263-.557-.001c-1.09-4.555-10.807-14.497-15.937-15.85c-.257-.067-.23-.904.03-.96%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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