@phosphor-icons/swift

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.

Installation

Add this repo as a new Package Dependency with File > Add Package Dependencies... and enter this URL in the search bar:

https://github.com/phosphor-icons/swift

Choose appropriate version ranges, or use the main branch for the most recent version.

Usage

All icons are present on the Ph enum as computed properties that return a SwiftUI Image, plus some special sauce. To render an icon, use the computed weight property on the enum member, i.e. Ph.<name>.<weight>:

import SwiftUI
import PhosphorSwift

struct ContentView: View {
    var body: some View {
        HStack {
            Ph.horse.regular
                .color(.accentColor)
                .frame(width: 64, height: 64)
            Ph.heart.fill
                .color(.red)
                .frame(width: 64, height: 64)
            Ph.cube.duotone
                .frame(width: 64, height: 64)
        }   
    }
}

Note

By default, all icon images are .resizable() and rendered with .interpolation(Image.Interpolation.medium) for scalable, antialiased icons at any size, without much overhead. The frame can be sized manually, or an icon will fit the size of its parent frame – though it is recommended to use .aspectRatio(contentMode: .fit) to retain the icon's original (square) aspect ratio in this case.

Color can be applied with the .color(_: Color) modifier, which at present is simply a View extension which applies a ViewModifier to any view, causing a color mask to be applied to that view's non-transparent elements.

If weight is dynamic, you can use the .weight(_: Ph.IconWeight) method to render a weight that is not known at compile time, or to use different weights as states (e.g. active/inactive).

Our Related Projects

• @phosphor-icons/homepage ▲ Phosphor homepage and general info
• @phosphor-icons/core ▲ Phosphor icon assets and catalog
• @phosphor-icons/react ▲ Phosphor icon component library for React
• @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
• @phosphor-icons/vue ▲ Phosphor icon component library for Vue
• @phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
• @phosphor-icons/elm ▲ Phosphor icons for Elm
• @phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
• @phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
• @phosphor-icons/figma ▲ Phosphor icons Figma plugin
• @phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
• @phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
• @phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette

Community Projects

• phosphor-react-native ▲ Phosphor icon component library for React Native
• phosphor-svelte ▲ Phosphor icons for Svelte apps
• phosphor-r ▲ Phosphor icon wrapper for R documents and applications
• blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
• wireui/phosphoricons ▲ Phosphor icons for Laravel
• phosphor-css ▲ CSS wrapper for Phosphor SVG icons
• ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
• eleventy-plugin-phosphoricons ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
• phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
• wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
• ember-phosphor-icons ▲ Phosphor icons for Ember apps

If you've made a port of Phosphor and you want to see it here, just open a PR here!

License

MIT © Phosphor Icons