A flexible icon family for Flutter
See the code
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.
Add this to your pubspec.yaml
dependencies:
phosphor_flutter: ^any
Then run the pub get command
flutter pub get
PhosphorIcon WidgetThe easiest way to use all the Phosphor Icons in your app is to use the
PhosphorIcon widget with one of the style-specific icon classes and pass any of our PhosphorIcons to it.
PhosphorIconsRegularPhosphorIconsThinPhosphorIconsLightPhosphorIconsBoldPhosphorIconsFillPhosphorIconsDuotone[!TIP] Use the style classes for smaller font file size. The alternative syntax
PhosphorIcons.pencil(PhosphorIconsStyle.fill)is not recommended as it prevents tree shaking.
// import the package
import 'package:phosphor_flutter/phosphor_flutter.dart';
// This will show the [Note Pencil] icon in its fill version
// with a size of 30.0, green color and a semantic label for
// screen readers.
PhosphorIcon(
PhosphorIconsFill.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(
PhosphorIconsDuotone.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(
PhosphorIconsDuotone.notePencil,
color: Colors.green,
duotoneSecondaryOpacity: 0.50,
duotoneSecondaryColor: Colors.yellow,
),
you can even make the opacity 100% to have a real duocolor icon.
Icon WidgetYou can use the native flutter Icon() widget passing any PhosphorIcon value
like any Material Icon
NOTE: Due some limitations with the flutter
Iconwidget when you pass a duotone icon it will render it as a simple icon, for this case prefer to use our customPhosphorIconwidget that works the same asIconbut support our duotone style
// With Material Icons
Icon(
Icons.edit, // Pencil icon
),
// With Phosphor Icons
Icon(
PhosphorIconsRegular.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(
PhosphorIconsFill.notePencil,
color: Colors.green,
size: 30.0,
semanticLabel: 'New Note',
),
All the icons has their thin, light, regular, bold and fill versions.
To migrate from v1.0.0 to 2.1.0 you just need to change all your
PhosphorIcons.iconStyle to the new syntax.
For example:
// previous
Icon(
PhosphorIcons.pencilFill, // Pencil Fill Icon
)
// new
Icon(
PhosphorIconsFill.pencil, // Pencil Fill Icon
)
// new and suggested
PhosphorIcon(
PhosphorIconsFill.pencil, // Pencil Fill Icon
)
Also, we encourage you to use our new PhosphorIcon widget to have support for
duotone icons.
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
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons
A flexible icon family for Flutter
See the code
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.
Add this to your pubspec.yaml
dependencies:
phosphor_flutter: ^any
Then run the pub get command
flutter pub get
PhosphorIcon WidgetThe easiest way to use all the Phosphor Icons in your app is to use the
PhosphorIcon widget with one of the style-specific icon classes and pass any of our PhosphorIcons to it.
PhosphorIconsRegularPhosphorIconsThinPhosphorIconsLightPhosphorIconsBoldPhosphorIconsFillPhosphorIconsDuotone[!TIP] Use the style classes for smaller font file size. The alternative syntax
PhosphorIcons.pencil(PhosphorIconsStyle.fill)is not recommended as it prevents tree shaking.
// import the package
import 'package:phosphor_flutter/phosphor_flutter.dart';
// This will show the [Note Pencil] icon in its fill version
// with a size of 30.0, green color and a semantic label for
// screen readers.
PhosphorIcon(
PhosphorIconsFill.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(
PhosphorIconsDuotone.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(
PhosphorIconsDuotone.notePencil,
color: Colors.green,
duotoneSecondaryOpacity: 0.50,
duotoneSecondaryColor: Colors.yellow,
),
you can even make the opacity 100% to have a real duocolor icon.
Icon WidgetYou can use the native flutter Icon() widget passing any PhosphorIcon value
like any Material Icon
NOTE: Due some limitations with the flutter
Iconwidget when you pass a duotone icon it will render it as a simple icon, for this case prefer to use our customPhosphorIconwidget that works the same asIconbut support our duotone style
// With Material Icons
Icon(
Icons.edit, // Pencil icon
),
// With Phosphor Icons
Icon(
PhosphorIconsRegular.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(
PhosphorIconsFill.notePencil,
color: Colors.green,
size: 30.0,
semanticLabel: 'New Note',
),
All the icons has their thin, light, regular, bold and fill versions.
To migrate from v1.0.0 to 2.1.0 you just need to change all your
PhosphorIcons.iconStyle to the new syntax.
For example:
// previous
Icon(
PhosphorIcons.pencilFill, // Pencil Fill Icon
)
// new
Icon(
PhosphorIconsFill.pencil, // Pencil Fill Icon
)
// new and suggested
PhosphorIcon(
PhosphorIconsFill.pencil, // Pencil Fill Icon
)
Also, we encourage you to use our new PhosphorIcon widget to have support for
duotone icons.
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
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons