phosphor-icons / flutter

A flexible icon family for Flutter

phosphor-flutter

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

ScreenShots

Installation

Add this to your pubspec.yaml

dependencies:
  phosphor_flutter: ^any

Then run the pub get command

flutter pub get

Usage

PhosphorIcon Widget

The easiest way to use all the Phosphor Icon with you app is to use our PhosphorIcon and pass any of our PhosphorIcons to it.

// import the package
import 'package:phosphor_flutter/phosphor_flutter.dart';

// This will show the [Note Pencil] icon in it's fill version
// with a size of 30.0, green color and a semantic label for
// screen readers.
PhosphorIcon(
  PhosphorIcons.fill.notePencil,
  color: Colors.green,
  size: 30.0,
  semanticLabel: 'New Note',
),

you could also use the duotone style like this

// import the package
import 'package:phosphor_flutter/phosphor_flutter.dart';

// This will show the [Note Pencil] icon in it's duotone version
PhosphorIcon(
  PhosphorIcons.duotone.notePencil,
  color: Colors.green,
),

by default the secondary color will be the same as the one passed here but with a 20% of opacity, but you can easily override that behavior with the duotoneSecondaryOpacity and duotoneSecondaryColor properties

// import the package
import 'package:phosphor_flutter/phosphor_flutter.dart';

// This will show the [Note Pencil] icon in it's duotone version where the
// foreground color will be green and the background color will be yellow
// with an opacity of 50%
PhosphorIcon(
  PhosphorIcons.duotone.notePencil,
  color: Colors.green,
  duotoneSecondaryOpacity: 0.50,
  duotoneSecondaryColor: Color.yellow,
),

you can even make the opacity 100% to have a real duocolor icon.

Flutter Icon Widget

You can use the native flutter Icon() widget passing any PhosphorIcon value like any Material Icon

NOTE: Due some limitations with the flutter Icon widget when you pass a duotone icon it will render it as a simple icon, for this case prefer to use our custom PhosphorIcon widget that works the same as Icon but support our duotone style

// With Material Icons
Icon(
  Icons.edit, // Pencil icon
),

// With Phosphor Icons
Icon(
  PhosphorIcons.regular.pencil, // Pencil Icon
),

You could use any property of the Icon widget to personalize the icon.

// This will show the [Note Pencil] icon in it's fill version
// with a size of 30.0, green color and a semantic label for
// screen readers.
Icon(
  PhosphorIcons.fill.notePencil,
  color: Colors.green,
  size: 30.0,
  semanticLabel: 'New Note',
),

All the icons has their thin, light, regular, bold and fill versions.

Migration Guide

To migrate from v1.0.0 to 2.0.0 you just need to change all your PhosphorIcons.iconStyle to the new syntax PhosphorIcons.style.icon. For example:

// previous
Icon(
  PhosphorIcons.pencilFill, // Pencil Fill Icon
)

// new
Icon(
  PhosphorIcons.fill.pencil, // Pencil Fill Icon
)

// new and suggested
PhosphorIcon(
  PhosphorIcons.fill.pencil, // Pencil Fill Icon
)

Also, we encourage you to use our new PhosphorIcon widget to have support for duotone icons.

Example App

You could see all the icons within the example app.

Just clone the repository and run the next commands

cd phosphor_flutter/example
flutter pub get
flutter run

Our Related Projects

• phosphor-home ▲ Phosphor homepage and general info
• phosphor-react ▲ Phosphor icon component library for React
• phosphor-vue ▲ Phosphor icon component library for Vue
• phosphor-icons ▲ Phosphor icons for Vanilla JS
• phosphor-webcomponents ▲ Phosphor icons as Web Components
• phosphor-figma ▲ Phosphor icons Figma plugin
• phosphor-sketch ▲ Phosphor icons Sketch plugin

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
• ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications

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

License

MIT © Phosphor Icons

flutter's Issues

Downloading all fonts on the web, even when using only one type of icon

I'm using only the duotone, and it is tree shaking as expected, but the other font files are kept with their original size, increasing the load time drastically without benefit.

Implement dual tone

This type of icons looks very good.

This weight is not yet supported

Is currently written on the website.

Static icon classes and its members should be const

Hello, thanks for the great set of icons!

I've noticed that different types of icons have been put into separate classes as static members of the abstract class PhosphorIcons since I've upgraded to version 2.0.0 which is really nice.

My latest builds failed for a reason that I believe is related to the way PhosphorIcons are accessed.
Error (Xcode): This application cannot tree shake icons fonts. It has non-constant instances of IconData at the following locations:

Since each class and its members are auto generated and do not change at any time I believe both classes such as PhosphorIconsBold() and all of it's members could and should be const. This way each icon could be accessed in a constant way which improves performance.

Any update for 2.0 icons?

Is there any update coming for Phosphor 2.0 icons?

Missing some fill icons

I noticed that the transgender icon does not have a correct fill variant

Update package

Can you please update the package to 1.3.1 and add a link to the pub page in the readme?

An error occurs when building flutter for Android

An error occurs when building flutter for Android.

I saw the warning message and added the '--no-tree-shake-icons' option and the build succeeded, but I think this should be a patch.

cmd:
flutter build apk

error:
This application cannot tree shake icons fonts. It has non-constant instances of IconData at the following locations:

• file:///C:/Users/sgbai/AppData/Local/Pub/Cache/hosted/pub.dev/phosphor_flutter-2.0.0/lib/src/phosphor_icons_bold.dart:8:23
• file:///C:/Users/sgbai/AppData/Local/Pub/Cache/hosted/pub.dev/phosphor_flutter-2.0.0/lib/src/phosphor_icons_bold.dart:11:29

...

Target aot_android_asset_bundle failed: Exception: Avoid non-constant invocations of IconData or try to build again with --no-tree-shake-icons.

Icons misalign on Chrome for Android

While deploying the flutter app on the web, icons do not align properly in Chrome for Android.

However, they align properly when viewed in Firefox for Android and Safar for iOS. Also, icons align as expected on Chrome for Desktop.

Below are the screenshots of the issue.

Error to build apk with: phosphor_flutter: ^2.0.0

sealCheckFill Icon is missing

The icon with the label sealCheckFill is missing. According to https://phosphoricons.com/ it should have been included in release 1.2.0.

TikTokLogoFill Icon has extra padding on the right

I am using phosphor icons in one of my projects and the tiktok filled icon has extra padding on the right.

Code ->

CircleAvatar(
                    backgroundColor: Colors.black,
                    child: Icon(PhosphorIcons.tiktokLogoFill, color: Colors.white,),
                  )

When I use same thing with any other icon it gives exact results

CircleAvatar(
                    backgroundColor: Colors.black,
                    child: Icon(PhosphorIcons.tiktokLogo, color: Colors.white,),
                  )

Can you please check this out and let me know how to fix this ? Would be happy to open a PR

Error to build app phosphor_flutter-2.0.0

Duotone icons looks like regular in master branch

Hello!
Thank you for your great icons,

After upgrade from 1.4 to master, not 2.0.0 due to the const problem; I tested the PhosphorIconsDuotone implementation.
with the code :
Icon(PhosphorIconsDuotone.bookmarkSimple)

look exactly like
Icon(PhosphorIconsRegular.bookmarkSimple)

best regards,

Alexandre

Implement an initial rotation

Hello !
It would be great if we could set a rotation to the icon.
For example, I would like to use the triangle icon to point downward. Instead of requesting a new icon for each angle desired, it could be easier to just pass a double for degrees or radians to the PhosphorIcon class.

Why api changed in a minor version?

There's no perf gain or anything here, we should not change things like this

Please support icons in v2.0.0.

I tried to use the plus-square icon in flutter, but it was not available.

In phosphoricons.com, there is an example saying that it can be used as below, but it seems that it is not actually updated.

Icon(
PhosphorIcons. plusSquareThin,
size: 32.0;
)

Make weight classes implements an interface

I would do something like

PhosphorIcon((state.saved
                                ? PhosphorIcons.fill
                                : PhosphorIcons.light)
                            .floppyDisk)

but PhosphorIcons.fill and PhosphorIcons.light doesn't share the same interface.
Maybe an abstract class PhosphorFontSet that has these abstract properties

Duotone icons not working on web

Testing on web, duotone icons are not showing up, I get this error:
Could not find a set of Noto fonts to display all missing characters. Please add a font asset for the missing characters.

Seemed to work great on MacOS so issue is restricted to web as far as I can tell.

Export icons by type

Hey @rektdeckard 👋

Great icon set! Would you mind also exporting lists or maps of icons grouped by type? e.g.: normal, bold, etc.

Thanks!

Non-Constant Invocations of IconData in v 2.0.0

I just upgraded to v 2.0.0 of the package and I get the following error when building the app.
Flutter build cannot tree shake icons .
Is it possible to add tree-shake support out of the box.
Here is part of the log.
file:///...../Pub/Cache/hosted/pub.dev/phosphor_flutter-2.0.0/lib/src/phosphor_icons_light.dart:3746:19 file:///.....Pub/Cache/hosted/pub.dev/phosphor_flutter-2.0.0/lib/src/phosphor_icons_light.dart:3749:23 Target aot_android_asset_bundle failed: Exception: Avoid non-constant invocations of IconData or try to build again with --no-tree-shake-icons.

release date?

Hi there,

Thank you for phosphor-icons!

Will it be ready soon as a Flutter package?