https://github.com/jaywcjlove/SFSymbolsPicker
A SwiftUI view component for selecting SF Symbols in your macOS and iOS apps.
https://github.com/jaywcjlove/SFSymbolsPicker
apple ios jaywcjlove macos sfsymbols swift swift-package-manager swiftui swiftui-components symbols
Last synced: 3 days ago
JSON representation
A SwiftUI view component for selecting SF Symbols in your macOS and iOS apps.
- Host: GitHub
- URL: https://github.com/jaywcjlove/SFSymbolsPicker
- Owner: jaywcjlove
- License: mit
- Created: 2025-07-25T08:30:49.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-04-23T05:55:55.000Z (2 months ago)
- Last Synced: 2026-05-20T09:58:56.242Z (about 1 month ago)
- Topics: apple, ios, jaywcjlove, macos, sfsymbols, swift, swift-package-manager, swiftui, swiftui-components, symbols
- Language: Swift
- Homepage:
- Size: 56.6 KB
- Stars: 26
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-swift - SFSymbolsPicker - SwiftUI picker for browsing and selecting SF Symbols. (UI and SwiftUI)
README
SFSymbolsPicker
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
A modern SwiftUI component for selecting SF Symbols in your macOS and iOS applications. Provides an intuitive interface with search functionality, pagination, and multi-language support.
## Features
- 🎯 **Easy Integration**: Simple SwiftUI component that works out of the box
- 🔍 **Smart Search**: Real-time search with fuzzy matching algorithms
- 📱 **Cross-Platform**: Native support for both macOS (popover) and iOS (sheet)
- ⚡ **Performance Optimized**: Lazy loading with pagination for smooth scrolling
- 🎨 **Customizable**: Flexible API for custom button styles and panel sizes
## Installation
### Swift Package Manager
Add SFSymbolsPicker to your project using Xcode:
1. In Xcode, go to `File` → `Add Package Dependencies...`
2. Enter the repository URL: `https://github.com/jaywcjlove/SFSymbolsPicker.git`
3. Click `Add Package`
Or add it to your `Package.swift` file:
```swift
dependencies: [
.package(url: "https://github.com/jaywcjlove/SFSymbolsPicker.git", from: "1.0.0")
]
```
## Usage
### Basic Usage
Use the default picker button that displays a popover on macOS and a sheet on iOS:
```swift
import SFSymbolsPicker
struct ContentView: View {
@State var selection: String = "star.bubble"
var body: some View {
SFSymbolsPicker(selection: $selection, autoDismiss: false)
}
}
```
### Using the `.sfSymbolsPicker` Modifier
Use the `.sfSymbolsPicker` modifier to add symbol selection functionality to any view:
```swift
import SwiftUI
struct ContentView: View {
@State private var isPresented = false
@State private var selectedSymbol = "star"
var body: some View {
Button("Select Symbol") {
isPresented = true
}
.sfSymbolsPicker(isPresented: $isPresented, selection: $selectedSymbol)
}
}
```
### Advanced Modifier Configuration
Configure the `.sfSymbolsPicker` modifier with additional parameters:
```swift
struct AdvancedView: View {
@State private var isPresented = false
@State private var selectedSymbol = "heart.fill"
var body: some View {
VStack {
Image(systemName: selectedSymbol)
.font(.system(size: 50))
.foregroundColor(.red)
.onTapGesture {
isPresented = true
}
.sfSymbolsPicker(
isPresented: $isPresented,
selection: $selectedSymbol,
prompt: "Search icons...",
autoDismiss: true,
panelSize: CGSize(width: 400, height: 350),
navigationTitle: "Choose Icon"
)
Text("Tap the icon to select a new symbol")
.font(.caption)
.foregroundColor(.secondary)
}
}
}
```
### Custom Button Style
Customize the picker button with your own content:
```swift
struct ContentView: View {
@State var selection: String = "star.bubble"
var body: some View {
SFSymbolsPicker(selection: $selection, autoDismiss: false) {
HStack {
Image(systemName: selection)
Text("Choose Symbol")
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
}
```
### Panel Size Customization
Customize the picker panel size on macOS using the `panelSize` modifier:
```swift
struct ContentView: View {
@State var selection: String = "star.bubble"
var body: some View {
SFSymbolsPicker(selection: $selection)
.panelSize(.init(width: 400, height: 300))
}
}
```
### Search Functionality
The picker includes built-in search functionality with real-time filtering:
```swift
SFSymbolsPicker(
selection: $selection,
prompt: String(localized: "Search symbols...")
)
```
## Custom Picker Implementation
For advanced use cases, you can build your own custom picker using the underlying components.
### Custom Picker for macOS
Create a custom symbol picker with popover presentation on macOS:
```swift
struct CustomSymbolsPicker: View {
@ObservedObject var vm: SFSymbolsPickerViewModel = .init(prompt: "", autoDismiss: true)
@State var selection: String = "star.bubble"
@State var isPresented: Bool = false
var body: some View {
#if os(macOS)
VStack(spacing: 23) {
Button("Select a symbol") {
isPresented.toggle()
}
.popover(isPresented: $isPresented) {
SFSymbolsPickerPanel(selection: $selection)
.environmentObject(vm)
.frame(width: 320, height: 280)
.navigationTitle("Pick a symbol")
}
Image(systemName: selection)
.font(.system(size: 34))
.padding()
}
.frame(width: 320)
.frame(minHeight: 230)
#endif
}
}
```
### Custom Picker for iOS
Create a custom symbol picker with sheet presentation on iOS:
```swift
struct CustomSymbolsPicker: View {
@ObservedObject var vm: SFSymbolsPickerViewModel = .init(prompt: "", autoDismiss: true)
@State var selection: String = "star.bubble"
@State var isPresented: Bool = false
var body: some View {
#if os(iOS)
NavigationView {
VStack {
Button("Select a symbol") {
isPresented.toggle()
}
Image(systemName: selection)
.font(.system(size: 34))
.sheet(isPresented: $isPresented) {
NavigationStack {
SFSymbolsPickerPanel(selection: $selection)
.environmentObject(vm)
.navigationTitle("Pick a symbol")
}
}
}
.navigationTitle("SF Symbols Picker")
}
#endif
}
}
```
## License
Licensed under the MIT License.
