azure logo

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

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

2 other variants in LobeHub AI Icons

azureazure-text

The same logo in other sets

azureCodiconsazureDeviconazureSVG LogosazureMaterial Icon Themeazure-darkSkill Iconsazure-outlineTeenyicons

Use the azure logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID6)" d="M7.242 1.613A1.11 1.11 0 018.295.857h6.977L8.03 22.316a1.11 1.11 0 01-1.052.755h-5.43a1.11 1.11 0 01-1.053-1.466L7.242 1.613z"/><path fill="#0078d4" d="M18.397 15.296H7.4a.51.51 0 00-.347.882l7.066 6.595c.206.192.477.298.758.298h6.226l-2.706-7.775z"/><path fill="url(#svgID7)" d="M15.272.857H7.497L0 23.071h7.775l1.596-4.73 5.068 4.73h6.665l-2.707-7.775h-7.998L15.272.857z"/><path fill="url(#svgID8)" d="M17.193 1.613a1.11 1.11 0 00-1.052-.756h-7.81.035c.477 0 .9.304 1.052.756l6.748 19.992a1.11 1.11 0 01-1.052 1.466h-.12 7.895a1.11 1.11 0 001.052-1.466L17.193 1.613z"/><defs><linearGradient id="svgID6" x1="8.247" x2="1.002" y1="1.626" y2="23.03" gradientUnits="userSpaceOnUse"><stop stop-color="#114a8b"/><stop offset="1" stop-color="#0669bc"/></linearGradient><linearGradient id="svgID7" x1="14.042" x2="12.324" y1="15.302" y2="15.888" gradientUnits="userSpaceOnUse"><stop stop-opacity=".3"/><stop offset=".071" stop-opacity=".2"/><stop offset=".321" stop-opacity=".1"/><stop offset=".623" stop-opacity=".05"/><stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="svgID8" x1="12.841" x2="20.793" y1="1.626" y2="22.814" gradientUnits="userSpaceOnUse"><stop stop-color="#3ccbf4"/><stop offset="1" stop-color="#2892df"/></linearGradient></defs></svg>

React

import type { SVGProps } from "react";

export function LobehubAzureColor(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(#svgID6)" d="M7.242 1.613A1.11 1.11 0 018.295.857h6.977L8.03 22.316a1.11 1.11 0 01-1.052.755h-5.43a1.11 1.11 0 01-1.053-1.466L7.242 1.613z"/><path fill="#0078d4" d="M18.397 15.296H7.4a.51.51 0 00-.347.882l7.066 6.595c.206.192.477.298.758.298h6.226l-2.706-7.775z"/><path fill="url(#svgID7)" d="M15.272.857H7.497L0 23.071h7.775l1.596-4.73 5.068 4.73h6.665l-2.707-7.775h-7.998L15.272.857z"/><path fill="url(#svgID8)" d="M17.193 1.613a1.11 1.11 0 00-1.052-.756h-7.81.035c.477 0 .9.304 1.052.756l6.748 19.992a1.11 1.11 0 01-1.052 1.466h-.12 7.895a1.11 1.11 0 001.052-1.466L17.193 1.613z"/><defs><linearGradient id="svgID6" x1="8.247" x2="1.002" y1="1.626" y2="23.03" gradientUnits="userSpaceOnUse"><stop stopColor="#114a8b"/><stop offset="1" stopColor="#0669bc"/></linearGradient><linearGradient id="svgID7" x1="14.042" x2="12.324" y1="15.302" y2="15.888" gradientUnits="userSpaceOnUse"><stop stopOpacity=".3"/><stop offset=".071" stopOpacity=".2"/><stop offset=".321" stopOpacity=".1"/><stop offset=".623" stopOpacity=".05"/><stop offset="1" stopOpacity="0"/></linearGradient><linearGradient id="svgID8" x1="12.841" x2="20.793" y1="1.626" y2="22.814" gradientUnits="userSpaceOnUse"><stop stopColor="#3ccbf4"/><stop offset="1" stopColor="#2892df"/></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(#svgID6)" d="M7.242 1.613A1.11 1.11 0 018.295.857h6.977L8.03 22.316a1.11 1.11 0 01-1.052.755h-5.43a1.11 1.11 0 01-1.053-1.466L7.242 1.613z"/><path fill="#0078d4" d="M18.397 15.296H7.4a.51.51 0 00-.347.882l7.066 6.595c.206.192.477.298.758.298h6.226l-2.706-7.775z"/><path fill="url(#svgID7)" d="M15.272.857H7.497L0 23.071h7.775l1.596-4.73 5.068 4.73h6.665l-2.707-7.775h-7.998L15.272.857z"/><path fill="url(#svgID8)" d="M17.193 1.613a1.11 1.11 0 00-1.052-.756h-7.81.035c.477 0 .9.304 1.052.756l6.748 19.992a1.11 1.11 0 01-1.052 1.466h-.12 7.895a1.11 1.11 0 001.052-1.466L17.193 1.613z"/><defs><linearGradient id="svgID6" x1="8.247" x2="1.002" y1="1.626" y2="23.03" gradientUnits="userSpaceOnUse"><stop stop-color="#114a8b"/><stop offset="1" stop-color="#0669bc"/></linearGradient><linearGradient id="svgID7" x1="14.042" x2="12.324" y1="15.302" y2="15.888" gradientUnits="userSpaceOnUse"><stop stop-opacity=".3"/><stop offset=".071" stop-opacity=".2"/><stop offset=".321" stop-opacity=".1"/><stop offset=".623" stop-opacity=".05"/><stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="svgID8" x1="12.841" x2="20.793" y1="1.626" y2="22.814" gradientUnits="userSpaceOnUse"><stop stop-color="#3ccbf4"/><stop offset="1" stop-color="#2892df"/></linearGradient></defs></svg>
</template>

CSS

.icon-azure-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(%23svgID6)%22%20d%3D%22M7.242%201.613A1.11%201.11%200%20018.295.857h6.977L8.03%2022.316a1.11%201.11%200%2001-1.052.755h-5.43a1.11%201.11%200%2001-1.053-1.466L7.242%201.613z%22%2F%3E%3Cpath%20fill%3D%22%230078d4%22%20d%3D%22M18.397%2015.296H7.4a.51.51%200%2000-.347.882l7.066%206.595c.206.192.477.298.758.298h6.226l-2.706-7.775z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID7)%22%20d%3D%22M15.272.857H7.497L0%2023.071h7.775l1.596-4.73%205.068%204.73h6.665l-2.707-7.775h-7.998L15.272.857z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID8)%22%20d%3D%22M17.193%201.613a1.11%201.11%200%2000-1.052-.756h-7.81.035c.477%200%20.9.304%201.052.756l6.748%2019.992a1.11%201.11%200%2001-1.052%201.466h-.12%207.895a1.11%201.11%200%20001.052-1.466L17.193%201.613z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID6%22%20x1%3D%228.247%22%20x2%3D%221.002%22%20y1%3D%221.626%22%20y2%3D%2223.03%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23114a8b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230669bc%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID7%22%20x1%3D%2214.042%22%20x2%3D%2212.324%22%20y1%3D%2215.302%22%20y2%3D%2215.888%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-opacity%3D%22.3%22%2F%3E%3Cstop%20offset%3D%22.071%22%20stop-opacity%3D%22.2%22%2F%3E%3Cstop%20offset%3D%22.321%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%22.623%22%20stop-opacity%3D%22.05%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID8%22%20x1%3D%2212.841%22%20x2%3D%2220.793%22%20y1%3D%221.626%22%20y2%3D%2222.814%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233ccbf4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232892df%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(%23svgID6)%22%20d%3D%22M7.242%201.613A1.11%201.11%200%20018.295.857h6.977L8.03%2022.316a1.11%201.11%200%2001-1.052.755h-5.43a1.11%201.11%200%2001-1.053-1.466L7.242%201.613z%22%2F%3E%3Cpath%20fill%3D%22%230078d4%22%20d%3D%22M18.397%2015.296H7.4a.51.51%200%2000-.347.882l7.066%206.595c.206.192.477.298.758.298h6.226l-2.706-7.775z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID7)%22%20d%3D%22M15.272.857H7.497L0%2023.071h7.775l1.596-4.73%205.068%204.73h6.665l-2.707-7.775h-7.998L15.272.857z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID8)%22%20d%3D%22M17.193%201.613a1.11%201.11%200%2000-1.052-.756h-7.81.035c.477%200%20.9.304%201.052.756l6.748%2019.992a1.11%201.11%200%2001-1.052%201.466h-.12%207.895a1.11%201.11%200%20001.052-1.466L17.193%201.613z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID6%22%20x1%3D%228.247%22%20x2%3D%221.002%22%20y1%3D%221.626%22%20y2%3D%2223.03%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23114a8b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230669bc%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID7%22%20x1%3D%2214.042%22%20x2%3D%2212.324%22%20y1%3D%2215.302%22%20y2%3D%2215.888%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-opacity%3D%22.3%22%2F%3E%3Cstop%20offset%3D%22.071%22%20stop-opacity%3D%22.2%22%2F%3E%3Cstop%20offset%3D%22.321%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%22.623%22%20stop-opacity%3D%22.05%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID8%22%20x1%3D%2212.841%22%20x2%3D%2220.793%22%20y1%3D%221.626%22%20y2%3D%2222.814%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233ccbf4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232892df%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/azure-color.svg?color=%231a73e8&size=48