percona logo

percona from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
percona
Set
SVG Logos
Style
Color
Viewbox
256×250
License
CC0

Use the percona logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 250"><defs><linearGradient id="SVGyE8CMb2G" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#fbb32f"/><stop offset="50.474%" stop-color="#c11511"/><stop offset="100%" stop-color="#c11411"/></linearGradient></defs><path fill="url(#SVGyE8CMb2G)" d="M128 .578C57.308.578 0 56.413 0 125.29c0 43.086 22.427 81.066 56.526 103.47V125.354c-.001-.158-.023-.31-.023-.467s.022-.31.023-.468v-.877h.043c.701-40.146 32.335-72.48 71.323-72.48c39.427 0 71.388 33.052 71.388 73.825c0 40.772-31.961 73.825-71.388 73.825c-15.356 0-29.543-5.062-41.187-13.592v58.207A130.8 130.8 0 0 0 128 250c70.692 0 128-55.835 128-124.71C256 56.412 198.692.577 128 .577"/><path fill="#fcb42f" d="M171.197 127.472c0 23.59-19.123 42.713-42.713 42.713S85.77 151.062 85.77 127.472s19.124-42.713 42.714-42.713s42.713 19.123 42.713 42.713"/></svg>

React

import type { SVGProps } from "react";

export function LogosPercona(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 250"><defs><linearGradient id="SVGyE8CMb2G" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stopColor="#fbb32f"/><stop offset="50.474%" stopColor="#c11511"/><stop offset="100%" stopColor="#c11411"/></linearGradient></defs><path fill="url(#SVGyE8CMb2G)" d="M128 .578C57.308.578 0 56.413 0 125.29c0 43.086 22.427 81.066 56.526 103.47V125.354c-.001-.158-.023-.31-.023-.467s.022-.31.023-.468v-.877h.043c.701-40.146 32.335-72.48 71.323-72.48c39.427 0 71.388 33.052 71.388 73.825c0 40.772-31.961 73.825-71.388 73.825c-15.356 0-29.543-5.062-41.187-13.592v58.207A130.8 130.8 0 0 0 128 250c70.692 0 128-55.835 128-124.71C256 56.412 198.692.577 128 .577"/><path fill="#fcb42f" d="M171.197 127.472c0 23.59-19.123 42.713-42.713 42.713S85.77 151.062 85.77 127.472s19.124-42.713 42.714-42.713s42.713 19.123 42.713 42.713"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 250"><defs><linearGradient id="SVGyE8CMb2G" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#fbb32f"/><stop offset="50.474%" stop-color="#c11511"/><stop offset="100%" stop-color="#c11411"/></linearGradient></defs><path fill="url(#SVGyE8CMb2G)" d="M128 .578C57.308.578 0 56.413 0 125.29c0 43.086 22.427 81.066 56.526 103.47V125.354c-.001-.158-.023-.31-.023-.467s.022-.31.023-.468v-.877h.043c.701-40.146 32.335-72.48 71.323-72.48c39.427 0 71.388 33.052 71.388 73.825c0 40.772-31.961 73.825-71.388 73.825c-15.356 0-29.543-5.062-41.187-13.592v58.207A130.8 130.8 0 0 0 128 250c70.692 0 128-55.835 128-124.71C256 56.412 198.692.577 128 .577"/><path fill="#fcb42f" d="M171.197 127.472c0 23.59-19.123 42.713-42.713 42.713S85.77 151.062 85.77 127.472s19.124-42.713 42.714-42.713s42.713 19.123 42.713 42.713"/></svg>
</template>

CSS

.icon-percona {
  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%20250%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGyE8CMb2G%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fbb32f%22%2F%3E%3Cstop%20offset%3D%2250.474%25%22%20stop-color%3D%22%23c11511%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c11411%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGyE8CMb2G)%22%20d%3D%22M128%20.578C57.308.578%200%2056.413%200%20125.29c0%2043.086%2022.427%2081.066%2056.526%20103.47V125.354c-.001-.158-.023-.31-.023-.467s.022-.31.023-.468v-.877h.043c.701-40.146%2032.335-72.48%2071.323-72.48c39.427%200%2071.388%2033.052%2071.388%2073.825c0%2040.772-31.961%2073.825-71.388%2073.825c-15.356%200-29.543-5.062-41.187-13.592v58.207A130.8%20130.8%200%200%200%20128%20250c70.692%200%20128-55.835%20128-124.71C256%2056.412%20198.692.577%20128%20.577%22%2F%3E%3Cpath%20fill%3D%22%23fcb42f%22%20d%3D%22M171.197%20127.472c0%2023.59-19.123%2042.713-42.713%2042.713S85.77%20151.062%2085.77%20127.472s19.124-42.713%2042.714-42.713s42.713%2019.123%2042.713%2042.713%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%20256%20250%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGyE8CMb2G%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fbb32f%22%2F%3E%3Cstop%20offset%3D%2250.474%25%22%20stop-color%3D%22%23c11511%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c11411%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGyE8CMb2G)%22%20d%3D%22M128%20.578C57.308.578%200%2056.413%200%20125.29c0%2043.086%2022.427%2081.066%2056.526%20103.47V125.354c-.001-.158-.023-.31-.023-.467s.022-.31.023-.468v-.877h.043c.701-40.146%2032.335-72.48%2071.323-72.48c39.427%200%2071.388%2033.052%2071.388%2073.825c0%2040.772-31.961%2073.825-71.388%2073.825c-15.356%200-29.543-5.062-41.187-13.592v58.207A130.8%20130.8%200%200%200%20128%20250c70.692%200%20128-55.835%20128-124.71C256%2056.412%20198.692.577%20128%20.577%22%2F%3E%3Cpath%20fill%3D%22%23fcb42f%22%20d%3D%22M171.197%20127.472c0%2023.59-19.123%2042.713-42.713%2042.713S85.77%20151.062%2085.77%20127.472s19.124-42.713%2042.714-42.713s42.713%2019.123%2042.713%2042.713%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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