A collection of additional custom SFSymbols for Swift

Cameron Shemilt

Last update: Dec 2, 2022

Related tags

Overview

MoreSFSymbols

A collection of additional custom SFSymbols for Swift

Content

Usage
Symbols
- Developer
- Logos
Contributing
Licence

Usage

iOS 15.0:

Download the .svg-file of the symbol you want.
Drag the file into your Assets.xcassets.
The symbol is ready to use (ex.: Image("symbol.name")).

iOS 14.0 & earlier:

Download the .svg-file of the symbol you want.
Drag it into the Custom Symbols category (found in the sidebar).
Select it and click File > Export Symbol (or: cmd+shift+E)
Export it as a 2.0-version
Drag the exported file into your Assets.xcassets.
The symbol is ready to use (ex.: Image("symbol.name")).

It is important to note that you do not use the SFSymbols initialiser (eg. systemName:), but rather the initialiser for images from your assets.

Symbols

Preview images are rendered in .hierarchicalMode with a color of .blue. This however does not mean that there aren't other representation styles for the symbol. Monochrome, palette and multicolour also exist.

Example using the logo.paypal.square.fill-icon:

Monochrome	Hierarchical	Palette	Multicolor

`.symbolRenderingMode(.monochrome)` & `.foregroundColor(.black)`	`.symbolRenderingMode(.hierarchical)` & `.foregroundColor(.red)`	`.symbolRenderingMode(.palette)` & `.foregroundStyle(.red, .green, .yellow)` (i know it looks bad)	`.symbolRenderingMode(.multicolor)` & `.foregroundColor(.black)`

Developer

Preview	Name
Git
	`git.commit`
	`git.branch`
	`git.merge`
	`git.pullrequest`
	`git.fork`

Logos

Preview	Name
AppStore
	`logo.appstore`
	`logo.appstore.circle`
	`logo.appstore.circle.fill`
	`logo.appstore.square`
	`logo.appstore.square.fill`
Bluetooth
	`logo.bluetooth`
	`logo.bluetooth.capsule.portrait.fill`
Buy me a Coffee
	`logo.buymeacoffee`
Git
	`logo.git`
	`logo.git.fill`
GitHub
	`logo.github`
	`logo.github.circle`
	`logo.github.circle.fill`
	`logo.github.square`
Markdown
	`logo.markdown`
	`logo.markdown.rectangle`
	`logo.markdown.rectangle.fill`
PayPal
	`logo.paypal`
	`logo.paypal.alternative`
	`logo.paypal.circle`
	`logo.paypal.circle.fill`
	`logo.paypal.square`
	`logo.paypal.square.fill`

Contributing

Are you missing an icon or wish for a specific variant? Create an issue with the new icon-tag, or better yet: contribute to this project by submitting a pull request. I'm always happy to welcome new contributors who want to help me expand this collection even further. To get started, read the CONTRIBUTION.md.

Licence

Icons in the logos-category may be protected as a trademark in some jurisdictions. If you want to use it, you have to ensure that you have the legal right to do so and that you do not infringe any trademark rights.

You may use all other Icons for personal and commercial use.

Swift playground teaching basics of buffer overflow vulnerability and ARM64 assembly by exploiting vulnerable app on ARM64 emulator (WWDC22 Swift Student Challenge Winner)

Pwnground Project overview Pwnground is a project created as my submission for WWDC22 Swift Student Challenge (winner). It is an interactive Swift Pla

4 Aug 8, 2022

Comments

Add git themed symbols
Symbols added:

Git logo (logo.git, logo.git.fill)

More GitHub logo variants (logo.github.circle, logo.github.circle.fill, logo.github.square)

Commit (git.commit)

Branch (git.branch)

Merge (git.merge)

Pull request (git.pullrequest)

Fork (git.fork)

new symbol
opened by cameronshemilt 0
Chromecast Icon
What symbol do you want to have?

The Chromecast icons would be a great addition.

Describe the look of the icon

Chromecast is represented through a couple states:

| Disconnected | Cast 1 | Cast 2 | Cast 3 | Connected | | --- | --- | --- | --- | --- | | | | | |

What Category would this icon belong to

Logo

Additional information

The icon can be split into a few parts:

border

enabled band (white band)

disabled band (dark gray band)

center rectangle (connected)

These layers can be split and used for the different rendering styles.

Additionally, there is a bit of wiggle room when it comes to the exact dimensions of the entire icon. For example, Youtube doesn't use the exact above button and instead has a larger overall shape with sharp corners. I would recommend not trying to replicate the above dimensions 100%, but just whatever looks nice.
opened by LePips 0