higress-color from LobeHub AI Icons by LobeHub · Color · MIT Free for personal and commercial use.

Name
higress-color
Set
LobeHub AI Icons
Style
Color
Viewbox
24×24
License
MIT

2 other variants in LobeHub AI Icons

Use the higress logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID11)" d="M11.853 15.257c-.318.069-.648.101-.99.101H7.933a7.89 7.89 0 01-4.072-1.132 8.15 8.15 0 01-.616-.406 8.033 8.033 0 01-2.541-3.154c-.1-.23-.19-.46-.274-.7a8.007 8.007 0 01-.407-2.522V1H3.27v6.444c0 .153.004.298.025.443.016.214.048.415.1.616a4.681 4.681 0 002.223 2.985 4.667 4.667 0 002.296.616h.024a4.043 4.043 0 013.919 3.153h-.004z"/><path fill="#1e8cfe" d="M3.246 14.557v8.039H0v-12.24c.105.39.274.834.362 1.007a8.474 8.474 0 002.884 3.198v-.004z"/><path fill="url(#svgID12)" d="M15.824 16.151v6.445h-3.246V16.15a3.26 3.26 0 00-.024-.447 4.683 4.683 0 00-2.32-3.6 4.706 4.706 0 00-2.3-.616H7.91a4.047 4.047 0 01-3.919-3.146c.318-.068.649-.1.991-.1H7.91a7.89 7.89 0 014.072 1.131c.213.125.419.262.616.407a7.959 7.959 0 012.537 3.154 7.849 7.849 0 01.689 3.218z"/><path fill="#0418ff" d="M19.904 3.868c0-.552.201-1.027.6-1.426.399-.403.882-.6 1.442-.6.56 0 1.055.201 1.454.6.403.39.6.874.6 1.442s-.201 1.055-.6 1.454c-.39.402-.87.6-1.442.6a1.979 1.979 0 01-1.454-.6c-.403-.403-.6-.89-.6-1.47zm3.73 5.107v13.62h-3.36V8.972h3.36v.004z"/><path fill="#1e8cfe" d="M12.578 9.039V1h3.246v12.24a6.393 6.393 0 00-.362-1.007 8.474 8.474 0 00-2.884-3.198v.004z"/><defs><linearGradient id="svgID11" x1=".024" x2="11.853" y1="8.177" y2="8.177" gradientUnits="userSpaceOnUse"><stop stop-color="#0418ff"/><stop offset="1" stop-color="#1e8cfe"/></linearGradient><linearGradient id="svgID12" x1="15.824" x2="3.991" y1="15.418" y2="15.418" gradientUnits="userSpaceOnUse"><stop stop-color="#0418ff"/><stop offset="1" stop-color="#1e8cfe"/></linearGradient></defs></svg>

React

import type { SVGProps } from "react";

export function LobehubHigressColor(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID11)" d="M11.853 15.257c-.318.069-.648.101-.99.101H7.933a7.89 7.89 0 01-4.072-1.132 8.15 8.15 0 01-.616-.406 8.033 8.033 0 01-2.541-3.154c-.1-.23-.19-.46-.274-.7a8.007 8.007 0 01-.407-2.522V1H3.27v6.444c0 .153.004.298.025.443.016.214.048.415.1.616a4.681 4.681 0 002.223 2.985 4.667 4.667 0 002.296.616h.024a4.043 4.043 0 013.919 3.153h-.004z"/><path fill="#1e8cfe" d="M3.246 14.557v8.039H0v-12.24c.105.39.274.834.362 1.007a8.474 8.474 0 002.884 3.198v-.004z"/><path fill="url(#svgID12)" d="M15.824 16.151v6.445h-3.246V16.15a3.26 3.26 0 00-.024-.447 4.683 4.683 0 00-2.32-3.6 4.706 4.706 0 00-2.3-.616H7.91a4.047 4.047 0 01-3.919-3.146c.318-.068.649-.1.991-.1H7.91a7.89 7.89 0 014.072 1.131c.213.125.419.262.616.407a7.959 7.959 0 012.537 3.154 7.849 7.849 0 01.689 3.218z"/><path fill="#0418ff" d="M19.904 3.868c0-.552.201-1.027.6-1.426.399-.403.882-.6 1.442-.6.56 0 1.055.201 1.454.6.403.39.6.874.6 1.442s-.201 1.055-.6 1.454c-.39.402-.87.6-1.442.6a1.979 1.979 0 01-1.454-.6c-.403-.403-.6-.89-.6-1.47zm3.73 5.107v13.62h-3.36V8.972h3.36v.004z"/><path fill="#1e8cfe" d="M12.578 9.039V1h3.246v12.24a6.393 6.393 0 00-.362-1.007 8.474 8.474 0 00-2.884-3.198v.004z"/><defs><linearGradient id="svgID11" x1=".024" x2="11.853" y1="8.177" y2="8.177" gradientUnits="userSpaceOnUse"><stop stopColor="#0418ff"/><stop offset="1" stopColor="#1e8cfe"/></linearGradient><linearGradient id="svgID12" x1="15.824" x2="3.991" y1="15.418" y2="15.418" gradientUnits="userSpaceOnUse"><stop stopColor="#0418ff"/><stop offset="1" stopColor="#1e8cfe"/></linearGradient></defs></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID11)" d="M11.853 15.257c-.318.069-.648.101-.99.101H7.933a7.89 7.89 0 01-4.072-1.132 8.15 8.15 0 01-.616-.406 8.033 8.033 0 01-2.541-3.154c-.1-.23-.19-.46-.274-.7a8.007 8.007 0 01-.407-2.522V1H3.27v6.444c0 .153.004.298.025.443.016.214.048.415.1.616a4.681 4.681 0 002.223 2.985 4.667 4.667 0 002.296.616h.024a4.043 4.043 0 013.919 3.153h-.004z"/><path fill="#1e8cfe" d="M3.246 14.557v8.039H0v-12.24c.105.39.274.834.362 1.007a8.474 8.474 0 002.884 3.198v-.004z"/><path fill="url(#svgID12)" d="M15.824 16.151v6.445h-3.246V16.15a3.26 3.26 0 00-.024-.447 4.683 4.683 0 00-2.32-3.6 4.706 4.706 0 00-2.3-.616H7.91a4.047 4.047 0 01-3.919-3.146c.318-.068.649-.1.991-.1H7.91a7.89 7.89 0 014.072 1.131c.213.125.419.262.616.407a7.959 7.959 0 012.537 3.154 7.849 7.849 0 01.689 3.218z"/><path fill="#0418ff" d="M19.904 3.868c0-.552.201-1.027.6-1.426.399-.403.882-.6 1.442-.6.56 0 1.055.201 1.454.6.403.39.6.874.6 1.442s-.201 1.055-.6 1.454c-.39.402-.87.6-1.442.6a1.979 1.979 0 01-1.454-.6c-.403-.403-.6-.89-.6-1.47zm3.73 5.107v13.62h-3.36V8.972h3.36v.004z"/><path fill="#1e8cfe" d="M12.578 9.039V1h3.246v12.24a6.393 6.393 0 00-.362-1.007 8.474 8.474 0 00-2.884-3.198v.004z"/><defs><linearGradient id="svgID11" x1=".024" x2="11.853" y1="8.177" y2="8.177" gradientUnits="userSpaceOnUse"><stop stop-color="#0418ff"/><stop offset="1" stop-color="#1e8cfe"/></linearGradient><linearGradient id="svgID12" x1="15.824" x2="3.991" y1="15.418" y2="15.418" gradientUnits="userSpaceOnUse"><stop stop-color="#0418ff"/><stop offset="1" stop-color="#1e8cfe"/></linearGradient></defs></svg>
</template>

CSS

.icon-higress-color {
  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%22url(%23svgID11)%22%20d%3D%22M11.853%2015.257c-.318.069-.648.101-.99.101H7.933a7.89%207.89%200%2001-4.072-1.132%208.15%208.15%200%2001-.616-.406%208.033%208.033%200%2001-2.541-3.154c-.1-.23-.19-.46-.274-.7a8.007%208.007%200%2001-.407-2.522V1H3.27v6.444c0%20.153.004.298.025.443.016.214.048.415.1.616a4.681%204.681%200%20002.223%202.985%204.667%204.667%200%20002.296.616h.024a4.043%204.043%200%20013.919%203.153h-.004z%22%2F%3E%3Cpath%20fill%3D%22%231e8cfe%22%20d%3D%22M3.246%2014.557v8.039H0v-12.24c.105.39.274.834.362%201.007a8.474%208.474%200%20002.884%203.198v-.004z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID12)%22%20d%3D%22M15.824%2016.151v6.445h-3.246V16.15a3.26%203.26%200%2000-.024-.447%204.683%204.683%200%2000-2.32-3.6%204.706%204.706%200%2000-2.3-.616H7.91a4.047%204.047%200%2001-3.919-3.146c.318-.068.649-.1.991-.1H7.91a7.89%207.89%200%20014.072%201.131c.213.125.419.262.616.407a7.959%207.959%200%20012.537%203.154%207.849%207.849%200%2001.689%203.218z%22%2F%3E%3Cpath%20fill%3D%22%230418ff%22%20d%3D%22M19.904%203.868c0-.552.201-1.027.6-1.426.399-.403.882-.6%201.442-.6.56%200%201.055.201%201.454.6.403.39.6.874.6%201.442s-.201%201.055-.6%201.454c-.39.402-.87.6-1.442.6a1.979%201.979%200%2001-1.454-.6c-.403-.403-.6-.89-.6-1.47zm3.73%205.107v13.62h-3.36V8.972h3.36v.004z%22%2F%3E%3Cpath%20fill%3D%22%231e8cfe%22%20d%3D%22M12.578%209.039V1h3.246v12.24a6.393%206.393%200%2000-.362-1.007%208.474%208.474%200%2000-2.884-3.198v.004z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID11%22%20x1%3D%22.024%22%20x2%3D%2211.853%22%20y1%3D%228.177%22%20y2%3D%228.177%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230418ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e8cfe%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID12%22%20x1%3D%2215.824%22%20x2%3D%223.991%22%20y1%3D%2215.418%22%20y2%3D%2215.418%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230418ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e8cfe%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%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%22url(%23svgID11)%22%20d%3D%22M11.853%2015.257c-.318.069-.648.101-.99.101H7.933a7.89%207.89%200%2001-4.072-1.132%208.15%208.15%200%2001-.616-.406%208.033%208.033%200%2001-2.541-3.154c-.1-.23-.19-.46-.274-.7a8.007%208.007%200%2001-.407-2.522V1H3.27v6.444c0%20.153.004.298.025.443.016.214.048.415.1.616a4.681%204.681%200%20002.223%202.985%204.667%204.667%200%20002.296.616h.024a4.043%204.043%200%20013.919%203.153h-.004z%22%2F%3E%3Cpath%20fill%3D%22%231e8cfe%22%20d%3D%22M3.246%2014.557v8.039H0v-12.24c.105.39.274.834.362%201.007a8.474%208.474%200%20002.884%203.198v-.004z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID12)%22%20d%3D%22M15.824%2016.151v6.445h-3.246V16.15a3.26%203.26%200%2000-.024-.447%204.683%204.683%200%2000-2.32-3.6%204.706%204.706%200%2000-2.3-.616H7.91a4.047%204.047%200%2001-3.919-3.146c.318-.068.649-.1.991-.1H7.91a7.89%207.89%200%20014.072%201.131c.213.125.419.262.616.407a7.959%207.959%200%20012.537%203.154%207.849%207.849%200%2001.689%203.218z%22%2F%3E%3Cpath%20fill%3D%22%230418ff%22%20d%3D%22M19.904%203.868c0-.552.201-1.027.6-1.426.399-.403.882-.6%201.442-.6.56%200%201.055.201%201.454.6.403.39.6.874.6%201.442s-.201%201.055-.6%201.454c-.39.402-.87.6-1.442.6a1.979%201.979%200%2001-1.454-.6c-.403-.403-.6-.89-.6-1.47zm3.73%205.107v13.62h-3.36V8.972h3.36v.004z%22%2F%3E%3Cpath%20fill%3D%22%231e8cfe%22%20d%3D%22M12.578%209.039V1h3.246v12.24a6.393%206.393%200%2000-.362-1.007%208.474%208.474%200%2000-2.884-3.198v.004z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID11%22%20x1%3D%22.024%22%20x2%3D%2211.853%22%20y1%3D%228.177%22%20y2%3D%228.177%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230418ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e8cfe%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID12%22%20x1%3D%2215.824%22%20x2%3D%223.991%22%20y1%3D%2215.418%22%20y2%3D%2215.418%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230418ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e8cfe%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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