React-native-vector-icons: SF Symbols

[brunolemos]

Support SF Symbols, new icon set announced by Apple on WWDC 2019 with 1500+ icons.

• https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
• https://developer.apple.com/videos/play/wwdc2019/206/

_PS: They can only be used on iOS apps according to the guidelines (not android etc)._

[Ashoat]

Is it true that they can only be used on iOS? I can't find details on that restriction.

[mrtry]

see: SF Symbols - SF Symbols - Human Interface Guidelines - Apple Developer

IMPORTANT
All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols—or glyphs that are substantially or confusingly similar—in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.

[gekitz]

Maybe I'm wrong, but the quoted part above basically means you can use it in your app as long as you don't use it in your app icon and your logo.

[brunolemos]

I don’t think that’s the quote I was referring to, but I couldn’t find it so maybe they removed it.

[Ashoat]

I know that the guidelines were relaxed a bit after the initial pre-release, so perhaps this requirement was only present in the pre-release. That said, I’ve found some articles about those guidelines being relaxed, and none of them mention any OS requirements or anything that would preclude Android use (in prerelease or otherwise).

[kesha-antonov]

Any news?

[mengpeilee]

+1

[jesus-rod]

would be cool to have this

[aminta]

+1

[KristenLeach]

+1

[MoOx]

Would be awesome to have this indeed as this icons can be adjusted with their font weight, which is... awesome.
@oblador are you open to get a PR for these?

[ArekChr]

+1

[lorenzosignoretti]

+1

[MoOx]

FYI I did some research and it seems it can't be done, legally speaking. https://twitter.com/MoOx/status/1346195696169476098

tldr: _SF Symbols_:

• can only be used on Apple devices in native apps ❤️ 💻📱⌚️🖥
• ⚠️ can NOT be shared as a font, as PNG etc, and cannot be used on non Apple devices 💔 🤖

SF Symbols is implemented on iOS/macOS as a native thing. For iOS 12-, you have to handle fallback assets.
You can try to use San Francisco font, but per licence of this font, you cannot use & embed this font on something that is not an iOS/macOS/watchOS app, so unusable for Android, Windows, web etc.

Meanwhile, you can use https://www.npmjs.com/package/react-native-sfsymbols for iOS.

I am starting to work on a library that will provide "os icons", that will use sf symbols on iOS/macOS, materials icons on android, and fluent ui icons for windows, will fallback for the web to anything that isn't sf symbols. I may post a link of this lib here when it's ready if I think about it... :)

(You can try to export SF symbols as SVG and make a font (if that's legal...) ... but I think the idea I got to offer adaptative icons per platform is more appealing to me)