Brand bluesky icon, free SVG and components: glyphfox

Sizes, weights and styles

Every glyphfox icon renders along three axes. The stroke grows a little below 24 px so small icons keep their presence.

Sizes

16 px

20 px

24 px

32 px

48 px

Weights

weight 1

weight 1.5

weight 2

weight 2.5

weight 3

Styles

Outline

Duotone

Solid

sharp corners

Copy the code

Pick a format. Each snippet uses the package entry point for that stack; the props work the same everywhere.

App.jsx

import { BrandBlueskyIcon } from 'glyphfox/react';

<BrandBlueskyIcon />

App.vue

<script setup>
import { BrandBlueskyIcon } from 'glyphfox/vue';
</script>

<template>
  <BrandBlueskyIcon />
</template>

App.svelte

<script>
  import { BrandBlueskyIcon } from 'glyphfox/svelte';
</script>

<BrandBlueskyIcon />

app.component

import { GlyphFoxIcon, provideGlyphFox } from 'glyphfox-angular';

<gf-icon name="brand-bluesky"></gf-icon>

index.html

<glyph-fox name="brand-bluesky"></glyph-fox>

index.html

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>

<glyph-fox name="brand-bluesky"></glyph-fox>

index.html

<span class="gf-brand-bluesky" aria-hidden="true"></span>

brand-bluesky.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="glyphfox glyphfox-brand-bluesky" aria-hidden="true"><path d="M12 10.5C10 6.5 6.5 3.5 4 3.5C2.5 3.5 2.5 5.5 2.75 7.5C3 10.5 4.5 12.5 8 13C5 14 4.75 17 7 18.5C9 19.75 11 17.5 12 15.5C13 17.5 15 19.75 17 18.5C19.25 17 19 14 16 13C19.5 12.5 21 10.5 21.25 7.5C21.5 5.5 21.5 3.5 20 3.5C17.5 3.5 14 6.5 12 10.5Z"/></svg>

data URI

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='glyphfox glyphfox-brand-bluesky' aria-hidden='true'%3E%3Cpath d='M12 10.5C10 6.5 6.5 3.5 4 3.5C2.5 3.5 2.5 5.5 2.75 7.5C3 10.5 4.5 12.5 8 13C5 14 4.75 17 7 18.5C9 19.75 11 17.5 12 15.5C13 17.5 15 19.75 17 18.5C19.25 17 19 14 16 13C19.5 12.5 21 10.5 21.25 7.5C21.5 5.5 21.5 3.5 20 3.5C17.5 3.5 14 6.5 12 10.5Z'/%3E%3C/svg%3E

index.html

<!-- copy node_modules/glyphfox/dist/sprite.svg to your public folder -->
<svg width="24" height="24" aria-hidden="true">
  <use href="/sprite.svg#gf-brand-bluesky"></use>
</svg>

index.html

<!-- main.js: import 'glyphfox/runtime'; -->
<i data-glyph="brand-bluesky"></i>

icon.js

import { renderToString } from 'glyphfox/core';
import iconBrandBluesky from 'glyphfox/icons/brand-bluesky';

const svg = renderToString(iconBrandBluesky, { size: 24 });

// or, with every icon registered by name:
// import { toSvg } from 'glyphfox';
// toSvg('brand-bluesky', { size: 24 });

Details

Name	`brand-bluesky`
React, Vue and Svelte component	`BrandBlueskyIcon`
Icon data export	`iconBrandBluesky`
Categories	social
Tags	bluesky blue sky bsky at protocol social logo brand
Styles	Outline, Duotone (fill of the closed shapes), Solid
Shapes	1
License	MIT

With a modifier badge

Add a badge in any corner with modifier or the name syntax. The icon is cut around the badge, so the result still passes the icon rules.

brand-bluesky+check

brand-bluesky+plus

brand-bluesky+x

brand-bluesky+alert

Related icons

Use it in your stack

Guides with the install, the props and the pitfalls for each stack: