Azure

File: azure.svg
viewBox: 0 0 1008.8 920.4
Weight: 1 KB

Another company's mark, kept in the design system for reference. It belongs to its owner and isn't part of the Black Atmosphere set: for anything published, use the company's official file and follow its guidelines.

96px

160px

240px +

Use it

Download SVG

React

import { Illustration } from '@ba-icons/react';
import azure from '@ba-icons/illustrations/hosting/azure';

<Illustration asset={azure} size={160} />

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import azure from '@ba-icons/illustrations/hosting/azure';
</script>

<template>
  <Illustration :asset="azure" :size="160" />
</template>

Astro

---
import { Illustration } from '@ba-icons/astro';
import azure from '@ba-icons/illustrations/hosting/azure';
---

<Illustration asset={azure} size={160} />

HTML

<script src="https://icons.atmosphere.africa/cdn/ba-icons-0.4.0.js" defer></script>

<ba-illustration name="hosting/azure" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008.8 920.4" fill="currentColor"><path d="M261.4 899Q266.4 897 478.9 853.5Q691.4 810 694.9 806.5Q698.4 803 583.9 642Q469.4 481 467.4 475Q466.4 472 494.4 375.5Q522.4 279 552.4 182Q582.4 85 585.4 81Q586.4 80 628.4 163Q670.4 246 729.4 365.5Q788.4 485 847.4 605Q906.4 725 947.9 810.5Q989.4 896 989.4 898Q989.4 901 623.4 901Q524.4 901 440.4 900.5Q356.4 900 308.4 899.5Q260.4 899 261.4 899ZM19.4 797Q22.4 788 143.4 542L264.4 296L379.4 182Q494.4 68 522.4 40Q547.4 16 547.4 20Q547.4 22 545.4 28Q539.4 43 389.4 423L238.4 804L127.4 805Q22.4 806 19.4 801Q19.4 800 19.4 797Z"></path></svg>

From the CDN

Link to the file instead of installing it: for <img>, CSS, emails and docs, with nothing added to your bundle. Served with CORS and cached for an hour.

https://icons.atmosphere.africa/svg/hosting/azure.svg

<img src="https://icons.atmosphere.africa/svg/hosting/azure.svg" alt="Azure" width="160">

import { illustrationUrl } from '@ba-icons/illustrations';

illustrationUrl('hosting/azure');
// → https://icons.atmosphere.africa/svg/hosting/azure.svg

As an <img> it draws in black. To give it the text colour, use it as a mask:

.mark {
  background-color: currentColor;
  mask: url('https://icons.atmosphere.africa/svg/hosting/azure.svg') center / contain no-repeat;
}

New to the packages? Point your project at the registry first.