phosphor_flutter 2.1.0 copy "phosphor_flutter: ^2.1.0" to clipboard
phosphor_flutter: ^2.1.0 copied to clipboard

Implementation of Phosphoricons for Flutter. 772 icons and counting. Thin, Light, Regular, Bold, Fill.

phosphor-flutter #

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

GitHub stars GitHub forks GitHub watchers Follow on GitHub

ScreenShots #

Screenshot Regular Screenshot Thin Screenshot Light Screenshot Bold Screenshot Fill Screenshot Duotone

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

Community Projects #

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

License #

MIT © Phosphor Icons

105
likes
150
pub points
97%
popularity
screenshot

Publisher

verified publisherphosphoricons.com

Implementation of Phosphoricons for Flutter. 772 icons and counting. Thin, Light, Regular, Bold, Fill.

Homepage
Repository (GitHub)
View/report issues
Contributing

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on phosphor_flutter