phosphor_icons 3.0.1 copy "phosphor_icons: ^3.0.1" to clipboard
phosphor_icons: ^3.0.1 copied to clipboard

Published 16 days ago • verified publisherfunccloud.com
SDKFlutter
PlatformAndroidiOSLinuxmacOSwebWindows
→

Metadata

Implementation of Phosphor Icons for Flutter. 1500+ icons in Thin, Light, Regular, Bold, Fill, and Duotone. Compatible with Flutter 3.43+.

More...

phosphor_icons #

Fork notice: This is a public fork of phosphor-icons/flutter, maintained by FuncCloud at funccloud/phosphor-icons.

Why this fork? To keep the package working with the latest Flutter SDK versions — including Flutter 3.43+ where IconData is final (#61) — and to add duotone theming support (#52).

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 pub package Upstream

ScreenShots #

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

Installation #

Add this to your pubspec.yaml

dependencies:
  phosphor_icons: ^3.0.1

Then run the pub get command

flutter pub get

Or install from GitHub:

dependencies:
  phosphor_icons:
    git:
      url: https://github.com/funccloud/phosphor-icons.git

Usage #

PhosphorIcon Widget #

The 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.

Available Styles: #

  • PhosphorIconsRegular
  • PhosphorIconsThin
  • PhosphorIconsLight
  • PhosphorIconsBold
  • PhosphorIconsFill
  • PhosphorIconsDuotone

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_icons/phosphor_icons.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_icons/phosphor_icons.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_icons/phosphor_icons.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.

To apply secondary color / opacity to every duotone PhosphorIcon in a subtree (similar to IconTheme), wrap them with PhosphorDuotoneTheme:

PhosphorDuotoneTheme(
  data: const PhosphorDuotoneThemeData(
    secondaryColor: Colors.amber,
    secondaryOpacity: 0.40,
  ),
  child: Row(
    children: [
      PhosphorIcon(PhosphorIconsDuotone.heart, color: Colors.red),
      PhosphorIcon(PhosphorIconsDuotone.star, color: Colors.red),
    ],
  ),
)

Or merge with an ambient theme:

PhosphorDuotoneTheme.merge(
  data: const PhosphorDuotoneThemeData(secondaryOpacity: 0.60),
  child: ...,
)

Widget-level duotoneSecondaryColor / duotoneSecondaryOpacity still override the theme.

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(
  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.

Migration Guide #

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.

Example App #

You could see all the icons within the example app.

Just clone the repository and run the next commands

cd example
flutter pub get
flutter run

Our Projects #

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

← Metadata

2
likes
150
points
854
downloads
screenshot

Documentation

API reference

Publisher

verified publisherfunccloud.com

Weekly Downloads

Metadata

Implementation of Phosphor Icons for Flutter. 1500+ icons in Thin, Light, Regular, Bold, Fill, and Duotone. Compatible with Flutter 3.43+.

Repository (GitHub)
View/report issues
Contributing

Topics

#icons #phosphor #ui #flutter

License

MIT (license)

Dependencies

flutter

More

Packages that depend on phosphor_icons

Back