14

I am trying to make a website and was hoping to use Apple's SF Symbols for some icons, however I can not find a way to get SF Icons onto a website, I downloaded the app and copied the icon however on the website it shows a blank square.

Any help would be appreciated.

Samo2120
  • 179
  • 1
  • 2
  • 11

3 Answers3

10

Unfortunately, this application is not permitted by the license that accompanies the SF Symbols download.

Your use of Symbols obtained from Apple’s SF Font is limited to creating mock-ups of user interfaces for software products running on Apple’s iOS, iPadOS, macOS and tvOS operating systems.

George Sun
  • 968
  • 8
  • 21
  • There is a contradiction in this paragraph above. The font throughout iOS, default for iOS apps, is a variation of SF with different sizes and weights. In addition, a website is something that is viewable on macOS. Why would you create a mockup, but not a production build with SF symbols, if that's indeed the target OS? Then do call out specific use cases that they will reject apps for if you use the symbol incorrectly, for example, the video camera for your own video chat instead of Apple FT. Again, the default font on iOS is not a mockup. – Tom GODDARD Jun 14 '22 at 16:17
4

You are not able to use this icons on the websites as license of SF symbols do not allow use those symbols externally than apple's products.

Legal alternative is to use symbols from here:

https://fonts.google.com/icons

https://www.w3schools.com/icons/icons_reference.asp

upd:

https://fontawesome.com/search?m=free&o=r

(most of them are not free, but, link goes to 2,018 free icons)

and by the way you can use it directly from swift using

https://github.com/LiveUI/Awesome

or

https://github.com/thii/FontAwesome.swift

But there exist ways to do this (illegall ofc)

way 1

you can try to manually add one of "San Francisco Fonts" to your website and use SFSymbols from those font.

way 2

you can copy image and paste it to any image editor and save as png.

enter image description here

After this you can use it as an image on the website.

ILLEGALLY

Andrew_STOP_RU_WAR_IN_UA
  • 9,318
  • 5
  • 65
  • 101
1

I copied symbols (UTF8 I guess) from SFSymbols3 mac app into TextEdit and saved it as html. Resulting page works in Chrome (94.04) on macOS, but surprisingly not in Safari (15.0).

I made a js fiddle: https://jsfiddle.net/4so0wzdk/#&togetherjs=Tv12LecGJT

Below a snipped where you have to paste symbol instead XXX and YYY.

<style type="text/css">    
   p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px 'SF Pro'}
</style>
</head>
<body>
  <p class="p1">XXX 0.circle</p>
  <p class="p1">YYY 00.circle</p>
</body>
</html>

SFSymbols3.app from Apple must be installed. Otherwise it won't work.

Nick
  • 1,248
  • 12
  • 18