Cog

A single cog.

File: cog.svg
viewBox: 0 0 1008.8 1008.8
Weight: 4 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import cog from '@ba-icons/illustrations/engineering/cog';

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

Vue

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

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import cog from '@ba-icons/illustrations/engineering/cog';
---

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

HTML

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

<ba-illustration name="engineering/cog" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008.8 1008.8" fill="currentColor"><path d="M413.4 986.4Q413.4 983.4 410.4 940.4Q407.4 897.4 406.9 894.4Q406.4 891.4 395.4 888.4Q347.4 875.4 311.4 854.4Q305.4 850.4 302.4 849.4L299.4 847.4L262.4 879.4L225.4 910.4L161.4 847.4Q98.4 783.4 98.4 782.9Q98.4 782.4 128.4 747.4Q158.4 712.4 159.4 710.4Q160.4 708.4 155.4 698.4Q130.4 656.4 119.4 612.4Q117.4 604.4 116.4 602.4Q116.4 602.4 72.4 598.9Q28.4 595.4 21.4 595.4H19.4V504.4V414.4L23.4 413.4Q27.4 412.4 71.4 409.4Q115.4 406.4 115.9 406.4Q116.4 406.4 120.4 393.4Q133.4 349.4 154.4 310.4Q160.4 299.4 160.4 298.9Q160.4 298.4 128.4 261.4L97.4 225.4L161.4 161.4L225.4 97.4L245.4 114.4Q298.4 160.4 299.4 160.4Q300.4 160.4 310.4 155.4Q350.4 132.4 395.4 119.4Q405.4 116.4 406.4 114.9Q407.4 113.4 410.4 69.4Q413.4 25.4 413.4 22.4L414.4 19.4H504.4H595.4L598.4 63.4Q601.4 106.4 602.4 111.4V116.4L614.4 120.4Q660.4 133.4 699.4 155.4L709.4 161.4L746.4 129.4Q783.4 98.4 783.9 98.4Q784.4 98.4 848.4 161.4L911.4 225.4L880.4 262.4Q848.4 298.4 848.4 298.9Q848.4 299.4 853.4 308.4Q877.4 350.4 890.4 397.4L892.4 406.4L937.4 409.4Q981.4 412.4 985.4 413.4L989.4 414.4V504.4V595.4H987.4Q985.4 595.4 939.9 598.4Q894.4 601.4 893.4 601.4Q892.4 601.4 889.4 612.4Q876.4 657.4 854.4 698.4L848.4 709.4L849.4 711.4Q851.4 713.4 879.4 745.4Q890.4 759.4 899.4 769.4Q908.4 779.4 909.4 780.4L911.4 782.4L847.4 846.4L783.4 910.4L746.4 879.4L709.4 847.4L698.4 853.4Q655.4 877.4 612.4 889.4Q602.4 891.4 602.4 892.9Q602.4 894.4 598.4 941.4L595.4 989.4H504.4H414.4ZM564.4 952.4Q564.4 949.4 567.4 907.9Q570.4 866.4 570.9 865.4Q571.4 864.4 579.4 863.4Q651.4 847.4 707.4 810.4L712.4 806.4L747.4 835.4Q781.4 865.4 781.9 865.4Q782.4 865.4 824.4 823.4L866.4 781.4L838.4 749.4Q810.4 716.4 808.4 714.4Q806.4 712.4 812.4 704.4Q849.4 646.4 863.4 580.4Q865.4 570.4 865.9 570.4Q866.4 570.4 911.4 567.4L956.4 563.4V504.4Q956.4 444.4 955.4 444.4Q953.4 444.4 912.9 441.4Q872.4 438.4 869.4 438.4L865.4 437.4L863.4 428.4Q848.4 357.4 813.4 307.4Q811.4 302.4 809.4 299.4L807.4 296.4L836.4 261.4L866.4 227.4L824.4 185.4Q782.4 143.4 781.9 143.4Q781.4 143.4 747.4 172.4Q713.4 201.4 712.9 201.4Q712.4 201.4 706.4 197.4Q645.4 158.4 580.4 145.4Q572.4 144.4 571.4 143.4Q570.4 142.4 567.4 99.9Q564.4 57.4 564.4 55.4V53.4H504.4H445.4L444.4 58.4Q443.4 63.4 440.9 102.9Q438.4 142.4 437.4 143.4Q436.4 144.4 428.4 145.4Q364.4 158.4 304.4 196.4Q296.4 201.4 295.9 201.4Q295.4 201.4 261.4 172.4Q227.4 143.4 226.9 143.4Q226.4 143.4 184.4 185.4L142.4 227.4L172.4 261.4Q201.4 295.4 201.4 295.9Q201.4 296.4 196.4 304.4Q159.4 362.4 145.4 427.4Q144.4 435.4 143.4 436.9Q142.4 438.4 99.4 441.4Q56.4 444.4 54.4 444.4H52.4V504.4V563.4L97.4 567.4Q142.4 570.4 142.9 570.9Q143.4 571.4 145.4 580.4Q160.4 646.4 196.4 703.4Q202.4 712.4 200.9 713.9Q199.4 715.4 170.4 748.4L142.4 781.4L184.4 823.4Q226.4 865.4 226.9 865.4Q227.4 865.4 261.4 836.4L296.4 806.4L303.4 810.4Q360.4 847.4 428.4 862.4Q437.4 865.4 437.9 865.4Q438.4 865.4 440.9 904.4Q443.4 943.4 444.4 949.4L445.4 955.4H504.4H563.4ZM488.4 699.4Q420.4 691.4 373.4 648.4Q309.4 589.4 309.4 504.4Q309.4 423.4 366.4 366.4Q423.4 309.4 504.4 309.4Q585.4 309.4 642.4 366.4Q699.4 423.4 699.4 504.4Q699.4 585.4 642.4 642.4Q597.4 687.4 533.4 697.4Q509.4 701.4 488.4 699.4ZM527.4 664.4Q568.4 658.4 600.4 635.4Q632.4 612.4 650.4 575.4Q681.4 513.4 656.4 448.4Q636.4 395.4 590.4 366.4Q535.4 332.4 471.4 345.4Q460.4 347.4 450.4 351.4Q440.4 355.4 430.9 360.4Q421.4 365.4 412.4 371.4Q403.4 377.4 395.4 384.4Q387.4 391.4 380.4 399.9Q373.4 408.4 367.4 417.4Q361.4 426.4 356.9 436.4Q352.4 446.4 349.4 457.4Q342.4 479.4 342.4 504.4Q342.4 525.4 347.4 544.4Q365.4 614.4 429.4 647.4Q464.4 665.4 503.4 666.4Q518.4 666.4 527.4 664.4Z"></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/engineering/cog.svg

<img src="https://icons.atmosphere.africa/svg/engineering/cog.svg" alt="Cog" width="160">

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

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

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