Some design

src/components/icons/BlueskyPlus.tsx

@@ -42,13 +42,13 @@ export function Logotype(props: Props) {
   const {fill, size: _size, style, gradient, ...rest} = useCommonSVGProps(props)
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 100)
-  const ratio = 78 / 330
+  const ratio = 88 / 330
   const {_} = useLingui()
 
   return (
     <Svg
       fill="none"
-      viewBox="0 0 330 78"
+      viewBox="0 -10 330 88"
       accessibilityLabel={_(msg`Bluesky Plus`)}
       accessibilityHint=""
       {...rest}

src/components/icons/Logo.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Mark = createSinglePathSVG({
+  path: 'M6.335 4.212c2.293 1.76 4.76 5.327 5.665 7.241.906-1.914 3.372-5.482 5.665-7.241C19.319 2.942 22 1.96 22 5.086c0 .624-.35 5.244-.556 5.994-.713 2.608-3.315 3.273-5.629 2.87 4.045.704 5.074 3.035 2.852 5.366-4.22 4.426-6.066-1.111-6.54-2.53-.086-.26-.126-.382-.127-.278 0-.104-.041.018-.128.278-.473 1.419-2.318 6.956-6.539 2.53-2.222-2.331-1.193-4.662 2.852-5.366-2.314.403-4.916-.262-5.63-2.87C2.35 10.33 2 5.71 2 5.086c0-3.126 2.68-2.144 4.335-.874Z',
+})