bluesky logo

bluesky from Font Awesome 6 Brands by Dave Gandy · Regular · CC-BY-4.0 Attribution required.

Name: bluesky
Set: Font Awesome 6 Brands
Style: Regular
Viewbox: 512×512
License: CC BY 4.0

The same logo in other sets

blueskyBootstrap Icons blueskyBoxicons Brands blueskyFont Awesome Brands blueskyHuge Icons blueskyMaterial Line Icons blueskySVG Logos blueskyOpenMoji blueskyPixelarticons bluesky-fillRemix Icon blueskySimple Icons

Use the bluesky logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2c-18.2 64.8-84.4 81.4-143.3 71.3C456 322 482.2 380 425.6 438c-107.4 110.2-154.3-27.6-166.3-62.9c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6BrandsBluesky(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2c-18.2 64.8-84.4 81.4-143.3 71.3C456 322 482.2 380 425.6 438c-107.4 110.2-154.3-27.6-166.3-62.9c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2c-18.2 64.8-84.4 81.4-143.3 71.3C456 322 482.2 380 425.6 438c-107.4 110.2-154.3-27.6-166.3-62.9c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>
</template>

CSS

.icon-bluesky {
  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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M111.8%2062.2C170.2%20105.9%20233%20194.7%20256%20242.4c23-47.6%2085.8-136.4%20144.2-180.2c42.1-31.6%20110.3-56%20110.3%2021.8c0%2015.5-8.9%20130.5-14.1%20149.2c-18.2%2064.8-84.4%2081.4-143.3%2071.3C456%20322%20482.2%20380%20425.6%20438c-107.4%20110.2-154.3-27.6-166.3-62.9c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6%203-3.3%207.8c-12%2035.3-59%20173.1-166.3%2062.9c-56.5-58-30.4-116%2072.5-133.5C100%20314.6%2033.8%20298%2015.7%20233.1C10.4%20214.4%201.5%2099.4%201.5%2083.9c0-77.8%2068.2-53.4%20110.3-21.8z%22%2F%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M111.8%2062.2C170.2%20105.9%20233%20194.7%20256%20242.4c23-47.6%2085.8-136.4%20144.2-180.2c42.1-31.6%20110.3-56%20110.3%2021.8c0%2015.5-8.9%20130.5-14.1%20149.2c-18.2%2064.8-84.4%2081.4-143.3%2071.3C456%20322%20482.2%20380%20425.6%20438c-107.4%20110.2-154.3-27.6-166.3-62.9c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6%203-3.3%207.8c-12%2035.3-59%20173.1-166.3%2062.9c-56.5-58-30.4-116%2072.5-133.5C100%20314.6%2033.8%20298%2015.7%20233.1C10.4%20214.4%201.5%2099.4%201.5%2083.9c0-77.8%2068.2-53.4%20110.3-21.8z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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