Notification

A phone with an information bubble.

File: notification.svg
viewBox: 0 0 982.1 982.2
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import notification from '@ba-icons/illustrations/concepts/notification';

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

Vue

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

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import notification from '@ba-icons/illustrations/concepts/notification';
---

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

HTML

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

<ba-illustration name="concepts/notification" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 982.1 982.2" fill="currentColor"><path d="M21.9 670.3Q24.9 377.3 24.9 246.3V115.3H216.9H409.9L436.9 99.3Q463.9 82.3 529.9 52.3Q560.9 37.3 576.9 31.3Q592.9 25.3 605.9 22.8Q618.9 20.3 640.9 19.3Q733.9 14.3 816.9 66.3Q899.9 118.3 937.9 205.3Q965.9 268.3 962.9 347.3Q960.9 399.3 946.9 436.3Q917.9 512.3 863.9 560.3Q814.9 604.3 760.4 618.8Q705.9 633.3 595.9 629.3Q531.9 628.3 516.9 629.3Q501.9 630.3 498.9 637.3Q493.9 647.3 493.9 723.8Q493.9 800.3 490.9 882.3L487.9 963.3H252.9H18.9ZM305.9 936.3Q304.9 932.3 301.4 930.3Q297.9 928.3 289.9 926.8Q281.9 925.3 264.9 925.3Q224.9 923.3 220.9 928.3Q209.9 941.3 235.9 945.3L264.9 946.3Q292.9 946.3 299.9 944.8Q306.9 943.3 305.9 936.3ZM448.9 903.3Q463.9 900.3 467.4 896.8Q470.9 893.3 472.9 878.3Q474.9 856.3 476.9 790.8Q478.9 725.3 478.9 669.8Q478.9 614.3 475.9 617.3Q470.9 623.3 469.9 717.3L467.9 812.3L466.9 710.3Q465.9 617.3 458.9 603.3Q452.9 592.3 428.9 577.3Q406.9 564.3 357.9 561.3Q277.9 555.3 277.9 538.3Q277.9 532.3 299.4 503.8Q320.9 475.3 320.9 465.8Q320.9 456.3 310.9 422.3Q300.9 390.3 300.4 346.8Q299.9 303.3 307.9 273.3Q315.9 244.3 333.9 205.3L352.9 167.3L330.9 166.3L314.9 164.3L336.9 161.3Q347.9 159.3 335.9 159.3Q320.9 158.3 284.9 160.3Q204.9 162.3 124.4 163.3Q43.9 164.3 47.4 165.8Q50.9 167.3 47.9 260.3Q44.9 353.3 43.9 624.3V895.3L53.9 900.3Q62.9 905.3 243.4 906.3Q423.9 907.3 448.9 903.3ZM691.9 439.3Q691.9 421.3 668.9 442.3Q648.9 461.3 642.9 450.3Q640.9 447.3 641.9 440.3Q647.9 405.3 653.4 354.3Q658.9 303.3 657.9 289.3L655.9 267.3H634.9Q612.9 268.3 588.9 286.3Q557.9 311.3 559.9 322.3Q560.9 330.3 582.9 316.3Q601.9 304.3 603.9 304.3Q611.9 304.3 596.9 407.3Q588.9 466.3 591.4 482.8Q593.9 499.3 611.9 499.3Q625.9 499.3 643.9 488.3Q661.9 477.3 676.9 461.8Q691.9 446.3 691.9 439.3ZM651.9 237.3Q669.9 219.3 668.9 197.8Q667.9 176.3 648.9 164.3Q629.9 152.3 612.4 159.3Q594.9 166.3 587.9 188.3Q577.9 220.3 603.9 239.8Q629.9 259.3 651.9 237.3Z"></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/concepts/notification.svg

<img src="https://icons.atmosphere.africa/svg/concepts/notification.svg" alt="Notification" width="160">

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

illustrationUrl('concepts/notification');
// → https://icons.atmosphere.africa/svg/concepts/notification.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/concepts/notification.svg') center / contain no-repeat;
}

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