Fix starter pack icon in profile menu (#11452)

This commit is contained in:
Samuel Newman
2026-08-12 19:03:54 +03:00
committed by DS Boyce
parent 310366d01f
commit 306bb3328a
12 changed files with 256 additions and 16 deletions
+208
View File
@@ -0,0 +1,208 @@
# Asset licensing
The [MIT license](./LICENSE) in this repository covers our source code. It does not cover
every file in the tree.
Some of the images, icons, fonts, and brand assets here are licensed to Bluesky Social PBC
by third parties, or are our trademarks, or are third-party trademarks. We cannot pass those
rights on to you. This document identifies them.
We should have written this down sooner. If you have already forked this repository and
shipped one of the assets listed below, we are not treating that as bad faith on your part —
the repository did not tell you, and that is our fault. Please work through the
[If you are forking](#if-you-are-forking) checklist when you can.
Assets are scoped by directory wherever possible, so that adding a file to a carved-out
directory does not require an edit here. Individual paths are listed only where an asset does
not sit in a dedicated directory.
**The rule:** if a file is listed in this document, the MIT license does not grant you rights
to it. Everything in [Section 6](#6-third-party-assets-you-may-redistribute) is redistributable
on its own terms, which travel with the files.
---
## 1. Commissioned artwork — licensed to Bluesky only
**`assets/illustrations/`**
The landing-screen illustration, in light and dark variants, used by
`src/view/com/auth/SplashScreen.tsx` (`illustration-mobile.png` and
`illustration-mobile-dark.png`).
This artwork was commissioned by Bluesky Social PBC from illustrator Owen D. Pomery, through
his agent Brilliant Artists Ltd. Copyright remains with the artist. Our license is limited to
Bluesky's own products and channels, it is exclusive to us, and it does not permit us to
sublicense the artwork or to distribute modified versions of it.
**If you are forking this repository, replace these files.** They are not available for
third-party licensing while our license runs, so please do not contact the artist or his agent
to request permission — the answer is constrained by our agreement, not by their willingness.
See [`assets/illustrations/README.md`](./assets/illustrations/README.md).
## 2. Licensed icon system — not ours to pass on
**`assets/icons/` (top level), and the icon glyphs in `bskyembed/assets/`**
The user-interface glyphs at the top level of `assets/icons/`, plus copies of several in
`bskyembed/assets/`, come from the Central icon system by Iconists (David & Storm GbR). Bluesky
Social PBC licenses these icons for use in our own products. **That license is for our own use.
It does not include the right to pass any rights to the icons on to you.**
This is not us telling you that you cannot use these icons. It is us telling you that any right
you have to use them has to come from Iconists rather than from us, and that you should not
assume our MIT license gave you one. Licenses are available directly from
[iconists.co](https://iconists.co), and there are good openly licensed alternatives if you would
rather not buy one.
This section covers every file at the top level of `assets/icons/` **except** those named
elsewhere in this document — specifically `logomark.svg`, `newskie.svg`, `verifiedCheck.svg`,
`verifierCheck.svg`, `starterPack.svg`, `starterPack_stroke2_corner0_rounded.svg`, `custom_logo_japan.svg`,
`apple_logo.svg`, and `android_logo.svg`. The `assets/icons/flags/` and `assets/icons/community/`
subdirectories are covered by [Section 6](#6-third-party-assets-you-may-redistribute) and
[Section 5](#5-third-party-trademarks) respectively.
See [`assets/icons/README.md`](./assets/icons/README.md).
## 3. Bluesky trademarks and brand assets
Our name, logo, butterfly mark, logotype, and app icons are trademarks of Bluesky Social PBC.
They are not licensed to you under the MIT license or by this document. Use of them is governed
by our [Trademark Policy](https://bsky.social/about/support/trademarks) and [Brand Guidelines](https://bsky.social/about/support/branding).
You may refer to Bluesky by name to describe interoperability or origin — for example, "a client
for Bluesky," or "based on the Bluesky app." You may not use our marks as the identity of your
own product or service, or in any way likely to suggest that Bluesky publishes, endorses, or
supports it.
- `assets/app-icons/` — all iOS and Android app icon variants, including the `.icon` bundles
- `assets/favicon.png`
- `assets/logo.png`
- `assets/default-avatar.png`
- `assets/icon-android-foreground.png`
- `assets/icon-android-monochrome.png`
- `assets/icon-android-notification.png`
- `assets/splash/splash.png`
- `assets/splash/splash-dark.png`
- `assets/splash/android-splash-logo-white.png`
- `assets/icons/logomark.svg`
- `assets/icons/newskie.svg`
- `assets/icons/verifiedCheck.svg`
- `assets/icons/verifierCheck.svg`
- `assets/icons/starterPack.svg`, `assets/icons/starterPack_stroke2_corner0_rounded.svg`
- `bskyembed/assets/logo.svg`
- `bskyembed/assets/logo_full_name.svg`
- `bskyweb/static/favicon.png`, `favicon-16x16.png`, `favicon-32x32.png`
- `bskyweb/static/apple-touch-icon.png`
- `bskyweb/static/safari-pinned-tab.svg`
- `bskyweb/static/social-card-default.png`, `bskyweb/static/social-card-default-gradient.png`
- `bskyweb/embedr-static/favicon.png`, `favicon-16x16.png`, `favicon-32x32.png`
- `modules/BlueskyClip/Images.xcassets/AppIcon.appiconset/`
- Inline vector path data in `src/view/icons/Logo.tsx` and `src/view/icons/Logotype.tsx`
We are not asking anyone to remove these files from the repository. They are here because the
app needs them to build. Replacing them is a forker's responsibility, not ours.
## 4. Community and contest artwork — credited, but not ours to license
These are third-party artworks that appear in the app with attribution. We hold no license that
lets us pass rights to them on to you.
- `assets/kawaii.png`, `assets/kawaii_smol.png` — logo by
[@sawaratsuki.bsky.social](https://bsky.app/profile/sawaratsuki.bsky.social), shown as an
opt-in variant and credited in `src/view/shell/Drawer.tsx` and
`src/view/shell/desktop/RightNav.tsx`
- `assets/icons/custom_logo_japan.svg` — the winning entry from the Bluesky Japan logo contest,
created by a contest entrant
Replace these if you fork. If you want to use them, that is a conversation with the artist,
not with us.
## 5. Third-party trademarks
These marks belong to other companies. We include them to identify their services in our UI —
sign-in buttons, store badges, and links to third-party applications. We are neither granting
nor withholding permission, because it is not ours to give. Your use of them rests on your own
nominative-use basis or on permission from the mark owner.
- `assets/icons/apple_logo.svg` — Apple Inc.
- `assets/icons/android_logo.svg` — Google LLC
- `assets/icons/community/` — Leaflet, Offprint, pckt (`pckt.svg`, `pckt-full.svg`),
Standard.site, and Germ Network (`germ_logo.webp`)
Apple's and Google's marks in particular carry their own brand guidelines governing size,
spacing, and permitted contexts. If you ship a sign-in button or a store badge, follow theirs,
not ours.
## 6. Third-party assets you may redistribute
These are licensed on terms that permit redistribution. Nothing in this document restricts them.
Their license text travels with the files, and you must keep it there.
| Asset | Path | License | Notice |
|---|---|---|---|
| Inter typeface | `assets/fonts/inter/` | SIL Open Font License 1.1 | [`OFL.txt`](./assets/fonts/inter/OFL.txt) |
| Inter typeface (OG card service) | `bskyogcard/src/assets/fonts/` | SIL Open Font License 1.1 | [`README.md`](./bskyogcard/src/assets/fonts/README.md) |
| country-flag-icons | `assets/icons/flags/` | MIT, © @catamphetamine | [`README.md`](./assets/icons/flags/README.md) |
| Material Icons | `bskyweb/static/media/MaterialIcons.*.ttf` | Apache License 2.0 | [`NOTICE.md`](./NOTICE.md) |
Build output under `bskyweb/static/media/` also contains compiled Inter files. They are the same
OFL-licensed typeface, emitted by the web build.
**One thing to watch on Inter:** OFL 1.1 includes a Reserved Font Name provision. If you modify
or subset the font, the result cannot be distributed under the name "Inter."
See [`NOTICE.md`](./NOTICE.md) for the consolidated third-party notices.
## 7. Product imagery — treat as not licensed to you
**`assets/images/`**
Product illustration and announcement imagery — onboarding value-prop art, chat backgrounds,
feature announcement graphics, and similar.
**Treat everything in this directory as outside the MIT license and not licensed for your use.**
Some of it is commissioned work. Rather than have you guess file by file which is which, we are
drawing the line at the directory.
If you are forking, replace these or ship without them.
See [`assets/images/README.md`](./assets/images/README.md).
---
## If you are forking
You have our blessing to fork this application. To do it cleanly:
1. **Replace `assets/illustrations/`.** Commissioned artwork, licensed to Bluesky only. See
[Section 1](#1-commissioned-artwork--licensed-to-bluesky-only).
2. **Source your own UI icons.** The glyph set in `assets/icons/` is licensed to us for our own
use. See [Section 2](#2-licensed-icon-system--not-ours-to-pass-on).
3. **Replace `assets/images/`.** Treat as not licensed to you. See
[Section 7](#7-product-imagery--treat-as-not-licensed-to-you).
4. **Replace the Bluesky marks** listed in [Section 3](#3-bluesky-trademarks-and-brand-assets) —
app icons, favicons, logo files, and the inline logo paths in `src/view/icons/`.
5. **Replace or remove the community artwork** in
[Section 4](#4-community-and-contest-artwork--credited-but-not-ours-to-license).
6. **Check your own position on the third-party marks** in
[Section 5](#5-third-party-trademarks).
7. **Keep the license notices** for the assets in
[Section 6](#6-third-party-assets-you-may-redistribute).
8. **Change your branding, support links, and analytics** as described in the
[Forking guidelines](./README.md#forking-guidelines).
This list is about licensing. The [Forking guidelines](./README.md#forking-guidelines) in the
README cover the rest of what makes a fork clearly distinguishable from Bluesky, which matters
both for your users and for app store review.
## Questions
If something in this repository looks like it should be on this list and is not, or if you are
unsure whether an asset is covered, open an issue or email us and we will sort it out. We would
much rather answer the question than have someone guess.
---
*Last reviewed: August 2026. This document describes the licensing position of assets in this
repository. It is not a grant of rights, and it does not modify the [MIT license](./LICENSE) as
it applies to source code.*
+23
View File
@@ -0,0 +1,23 @@
The user-interface glyphs in this directory are from the
[Central icon system](https://iconists.co/central) by Iconists (David & Storm GbR). Bluesky
Social PBC licenses them for use in our own products. **That license is for our own use, and it
does not extend to you.**
**These icons are not covered by the [MIT license](../../LICENSE) that applies to the rest of
this repository.** If you want to use them, buy a license from
[iconists.co](https://iconists.co). There are also good openly licensed icon sets if you would
rather not.
This notice covers the SVG files at the top level of this directory. It does not cover:
- `flags/` — country-flag-icons, MIT licensed, see [`flags/README.md`](./flags/README.md)
- `community/` — third-party service marks, see [`community/README.md`](./community/README.md)
- `logomark.svg`, `newskie.svg`, `verifiedCheck.svg`, `verifierCheck.svg`, `starterPack.svg`,
`starterPack_stroke2_corner0_rounded.svg` — Bluesky trademarks and brand assets
- `custom_logo_japan.svg` — artwork by a Bluesky Japan logo contest entrant
- `apple_logo.svg`, `android_logo.svg` — Apple and Google trademarks
Each of those is described in [`ASSETS.md`](../../ASSETS.md).
Adding an icon here? If it came from Central, this notice already covers it. If it came from
anywhere else, add it to `ASSETS.md` so the notice does not go stale.
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M10.775 2.74a3 3 0 0 1 3.524 2.158l.57 2.13a7.5 7.5 0 1 1-6.12 10.744l-2.228.598-.15.036a3 3 0 0 1-3.48-2.009l-.044-.148L.777 8.52A3 3 0 0 1 2.75 4.89l.148-.044 7.728-2.07.149-.037Zm4.624 6.262.97 3.624.037.149a3 3 0 0 1-2.009 3.48l-.148.044-3.517.942A5.5 5.5 0 1 0 15.5 9l-.101.002Zm-3.031-3.586a1 1 0 0 0-1.225-.707l-7.727 2.07a1 1 0 0 0-.707 1.225l2.07 7.727a1 1 0 0 0 1.225.707l2.123-.57a7.504 7.504 0 0 1 4.788-8.412l-.547-2.04ZM13.435 9.4a5.5 5.5 0 0 0-3.37 5.948l3.666-.981a1 1 0 0 0 .707-1.225L13.435 9.4Z" clip-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 656 B

-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 153 133"><path fill="url(#a)" fill-rule="evenodd" d="m60.196 105.445-18.1 4.85c-11.73 3.143-23.788-3.819-26.931-15.55L1.19 42.597c-3.143-11.731 3.819-23.79 15.55-26.932L68.889 1.69C80.62-1.452 92.68 5.51 95.821 17.241l4.667 17.416a50 50 0 0 1 3.522-.125c27.053 0 48.984 21.931 48.984 48.984S131.063 132.5 104.01 132.5c-19.17 0-35.769-11.012-43.814-27.055ZM19.457 25.804 71.606 11.83c6.131-1.643 12.434 1.996 14.076 8.127l4.44 16.571c-20.289 5.987-35.096 24.758-35.096 46.988 0 4.157.517 8.193 1.492 12.047l-17.138 4.593c-6.131 1.642-12.434-1.996-14.077-8.128L11.33 39.88c-1.643-6.131 1.996-12.434 8.127-14.077Zm83.812 19.232q.369-.007.741-.007c21.256 0 38.487 17.231 38.487 38.487s-17.231 38.488-38.487 38.488c-14.29 0-26.76-7.788-33.4-19.35l23.635-6.333c11.731-3.143 18.693-15.2 15.55-26.932l-6.526-24.353Zm-10.428 1.638 6.815 25.432c1.642 6.131-1.996 12.434-8.128 14.076l-24.867 6.664a38.6 38.6 0 0 1-1.139-9.33c0-17.372 11.51-32.056 27.32-36.842Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="76.715" x2="76.715" y1=".937" y2="132.5" gradientUnits="userSpaceOnUse"><stop stop-color="#0a7aff"/><stop offset="1" stop-color="#59b9ff"/></linearGradient></defs></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

@@ -13,7 +13,7 @@ import {precacheResolvedUri} from '#/state/queries/resolve-uri'
import {precacheStarterPack} from '#/state/queries/starter-packs'
import {useSession} from '#/state/session'
import {atoms as a, useTheme} from '#/alf'
import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
import {StarterPackMultiPathLarge as StarterPackIcon} from '#/components/icons/StarterPack'
import {
Link as BaseLink,
type LinkProps as BaseLinkProps,
+2 -2
View File
@@ -26,7 +26,7 @@ import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {Divider} from '#/components/Divider'
import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
import {StarterPack} from '#/components/icons/StarterPack'
import {StarterPackMultiPathLarge as StarterPackIcon} from '#/components/icons/StarterPack'
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
import {Loader} from '#/components/Loader'
import * as Toast from '#/components/Toast'
@@ -94,7 +94,7 @@ function Empty({onStartWizard}: {onStartWizard: () => void}) {
return (
<View style={[a.gap_2xl, {paddingTop: IS_WEB ? 100 : 64}]}>
<View style={[a.gap_xs, a.align_center]}>
<StarterPack
<StarterPackIcon
width={48}
fill={t.atoms.border_contrast_medium.borderColor}
/>
+11 -2
View File
@@ -1,8 +1,17 @@
import {createMultiPathSVG} from './TEMPLATE'
import {createMultiPathSVG, createSinglePathSVG} from './TEMPLATE'
export const StarterPack = createMultiPathSVG({
/**
* Special icon for large display. Use with `gradient="sky"`
*
* If trying to slot into other components (e.g. as a Menu.Item) use StarterPack_Stroke2_Corner0_Rounded instead
*/
export const StarterPackMultiPathLarge = createMultiPathSVG({
paths: [
'M11.26 5.227 5.02 6.899c-.734.197-1.17.95-.973 1.685l1.672 6.24c.197.734.951 1.17 1.685.973l6.24-1.672c.734-.197 1.17-.951.973-1.685L12.945 6.2a1.375 1.375 0 0 0-1.685-.973Zm-6.566.459a2.632 2.632 0 0 0-1.86 3.223l1.672 6.24a2.632 2.632 0 0 0 3.223 1.861l6.24-1.672a2.631 2.631 0 0 0 1.861-3.223l-1.672-6.24a2.632 2.632 0 0 0-3.223-1.861l-6.24 1.672Z',
'M15.138 18.411a4.606 4.606 0 1 0 0-9.211 4.606 4.606 0 0 0 0 9.211Zm0 1.257a5.862 5.862 0 1 0 0-11.724 5.862 5.862 0 0 0 0 11.724Z',
],
})
export const StarterPack_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M10.775 2.74a3 3 0 0 1 3.524 2.158l.57 2.13a7.5 7.5 0 1 1-6.12 10.744l-2.228.598-.15.036a3 3 0 0 1-3.48-2.009l-.044-.148L.777 8.52a3 3 0 0 1 1.973-3.63l.148-.044 7.728-2.07.149-.037Zm4.624 6.262.97 3.624.037.149a3 3 0 0 1-2.009 3.48l-.148.044-3.517.942A5.5 5.5 0 1 0 15.5 9l-.101.002Zm-3.031-3.586a1 1 0 0 0-1.225-.707l-7.727 2.07a1 1 0 0 0-.707 1.225l2.07 7.727a1 1 0 0 0 1.225.707l2.123-.57a7.504 7.504 0 0 1 4.788-8.412l-.547-2.04ZM13.435 9.4a5.5 5.5 0 0 0-3.37 5.948l3.666-.981a1 1 0 0 0 .707-1.225l-1.003-3.742Z',
})
+2 -2
View File
@@ -59,7 +59,7 @@ import {
type Props as SVGIconProps,
} from '#/components/icons/common'
import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
import {StarterPack} from '#/components/icons/StarterPack'
import {StarterPackMultiPathLarge as StarterPackIcon} from '#/components/icons/StarterPack'
import {UserCircle_Stroke2_Corner0_Rounded as Person} from '#/components/icons/UserCircle'
import {boostInterests} from '#/components/InterestTabs'
import {Loader} from '#/components/Loader'
@@ -659,7 +659,7 @@ export function Explore({
type: 'header',
key: 'suggested-starterPacks-header',
title: l`Starter Packs`,
icon: StarterPack,
icon: StarterPackIcon,
iconSize: 'md',
})
@@ -8,7 +8,7 @@ import {useSession} from '#/state/session'
import {useWizardState} from '#/screens/StarterPack/Wizard/State'
import {atoms as a, useTheme} from '#/alf'
import * as TextField from '#/components/forms/TextField'
import {StarterPack} from '#/components/icons/StarterPack'
import {StarterPackMultiPathLarge as StarterPackIcon} from '#/components/icons/StarterPack'
import {ScreenTransition} from '#/components/ScreenTransition'
import {Text} from '#/components/Typography'
@@ -29,7 +29,7 @@ export function StepDetails() {
<ScreenTransition direction={state.transitionDirection} enabledWeb>
<View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
<View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
<StarterPack width={90} gradient="sky" />
<StarterPackIcon width={90} gradient="sky" />
<Text style={[a.font_semi_bold, a.text_3xl]}>
<Trans>Invites, but personal</Trans>
</Text>
@@ -57,7 +57,7 @@ import {Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled} from '#/compon
import {PersonPlus_Filled_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
import {Repost_Stroke2_Corner3_Rounded as RepostIcon} from '#/components/icons/Repost'
import {StarterPack} from '#/components/icons/StarterPack'
import {StarterPackMultiPathLarge as StarterPackIcon} from '#/components/icons/StarterPack'
import {VerifiedCheck} from '#/components/icons/VerifiedCheck'
import {InlineLinkText, Link} from '#/components/Link'
import * as MediaPreview from '#/components/MediaPreview'
@@ -434,7 +434,7 @@ let NotificationFeedItem = ({
)
icon = (
<View style={{height: 30, width: 30}}>
<StarterPack width={30} gradient="sky" />
<StarterPackIcon width={30} gradient="sky" />
</View>
)
} else if (item.type === 'verified') {
@@ -745,7 +745,7 @@ function FollowedViaStarterPack({
<Text style={[native(a.pt_xs), t.atoms.text_contrast_medium]}>
<Trans comment="When the source of a follow is a starter pack, i.e., 'via starter pack {starterPackName}'.">
via starter pack{' '}
<StarterPack
<StarterPackIcon
size="sm"
gradient="sky"
style={[native(a.mr_2xs), {transform: [{translateY: 4}]}]}
+1 -1
View File
@@ -46,7 +46,7 @@ import {
RepostStrike_Stroke2_Corner0_Rounded as RepostStrikeIcon,
} from '#/components/icons/Repost'
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
import {StarterPack_Stroke2_Corner0_Rounded as StarterPackIcon} from '#/components/icons/StarterPack'
import * as Menu from '#/components/Menu'
import {BlockDialog} from '#/components/moderation/BlockDialog'
import {
@@ -17,7 +17,7 @@ import {TextLink} from '#/view/com/util/Link'
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {Text} from '#/view/com/util/text/Text'
import {UserAvatar, type UserAvatarType} from '#/view/com/util/UserAvatar'
import {StarterPack} from '#/components/icons/StarterPack'
import {StarterPackMultiPathLarge as StarterPackIcon} from '#/components/icons/StarterPack'
import * as Layout from '#/components/Layout'
import {useLightboxControls} from '#/components/Lightbox/state'
@@ -109,7 +109,7 @@ export function ProfileSubpageHeader({
accessibilityHint=""
style={{width: 58}}>
{avatarType === 'starter-pack' ? (
<StarterPack width={58} gradient="sky" />
<StarterPackIcon width={58} gradient="sky" />
) : (
<UserAvatar type={avatarType} size={58} avatar={avatar} />
)}