搜索插件、代码仓与 APP 分类

插件详情v2.1.0

fui_kit

我们的库提供了超过498个矢量SVG图标,包含6种不同的风格或主题。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
301
喜欢数
21
Pub 分数
160

安装插件

flutter pub add fui_kit

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

fui_kit 是一个全面的 Flutter 包,提供超过 498 个矢量 SVG 图标,涵盖六种不同的风格或主题。专为寻求多功能且可扩展图标的开发者设计,支持 Android、iOS、Web、macOS、Windows 和 Linux 等多个平台。图标经过性能和清晰度优化,确保在任何尺寸下都能清晰渲染。通过 Flutter pub 命令轻松集成,fui_kit 提升了应用程序 UI 设计的效率和视觉一致性。其庞大的图标库减少了对外部资源的依赖,并简化了图标管理。

适合场景

  • App UI 增强
  • 跨平台图标一致性
  • 设计系统集成
  • 快速原型设计
  • 品牌一致的视觉效果
  • 最小的资源开销

主要特点

  • 498+ 个 SVG 图标
  • 6 种图标样式/主题
  • 基于矢量的可扩展性
  • 多平台支持
  • 轻松集成 pub
  • 轻量且快速

适合对象

  • UI/UX 设计师
  • Flutter 开发者
  • 产品团队
  • Startups
  • 企业应用
  • 开源贡献者

使用建议

  • 仅限图标集
  • 不包含自定义工具
  • 需要手动选择主题
  • 不适合复杂的插图
  • 依赖外部GitHub源
  • 没有内置的图标搜索功能

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

fui_kit — Flat UI icons for Flutter

fui_kit banner

pub package pub points likes license: MIT codecov CI

fui_kit is a flat icon pack for Flutter with 2,988 SVG icons — 498 unique glyphs in 6 styles (regular, bold and solid weights, each with rounded or straight corners), based on the open source Flaticon UIcons set.

  • 🎨 Themeable — icons follow your app's IconTheme (light/dark mode works out of the box).
  • ♿ Accessible — first-class semanticLabel support for screen readers.
  • 🔍 Searchable — browse every icon in the interactive gallery.
  • 🧩 Drop-in — works anywhere a widget fits: IconButton, AppBar, ListTile, BottomNavigationBar…

All 6 icon styles

Installation

flutter pub add fui_kit

Or add it to your pubspec.yaml manually:

dependencies:
  fui_kit: ^2.1.0

Quick start

import 'package:flutter/material.dart';
import 'package:fui_kit/fui_kit.dart';

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const FUI(RegularRounded.heart);
  }
}

Use it like any other icon widget:

IconButton(
  onPressed: () {},
  icon: const FUI(BoldRounded.settings),
)
ListTile(
  leading: const FUI(SolidRounded.user, semanticLabel: 'Profile'),
  title: const Text('Profile'),
)

The 6 styles

Every glyph exists in all six styles. Pick the class that matches the look you want:

Style Class Example
Regular Rounded RegularRounded FUI(RegularRounded.bookmark)
Regular Straight RegularStraight FUI(RegularStraight.bookmark)
Bold Rounded BoldRounded FUI(BoldRounded.bookmark)
Bold Straight BoldStraight FUI(BoldStraight.bookmark)
Solid Rounded SolidRounded FUI(SolidRounded.bookmark)
Solid Straight SolidStraight FUI(SolidStraight.bookmark)

Icon names are lowerCamelCase versions of the original kebab-case Flaticon names: address-book → RegularRounded.addressBook.

Customization

FUI(
  SolidRounded.heart,
  color: Colors.red,          // defaults to IconTheme color
  width: 40,                  // defaults to IconTheme size (24)
  height: 40,
  semanticLabel: 'Favorite',  // announced by screen readers
)
Parameter Type Default Description
file (positional) String required Icon constant, e.g. RegularRounded.add
color Color? IconTheme color Tint applied to the icon
width / height double? IconTheme size (24) Rendered size
semanticLabel String? null Accessibility label
fit BoxFit BoxFit.contain How the icon fills its bounds
matchTextDirection bool false Mirror the icon in RTL locales
Theming and dark mode

FUI resolves its color and size from the ambient IconTheme, exactly like Flutter's built-in Icon widget. That means icons automatically switch color with your ThemeData in light/dark mode, and you can restyle entire subtrees at once:

IconTheme(
  data: const IconThemeData(color: Colors.teal, size: 32),
  child: Row(
    children: const [
      FUI(RegularRounded.home),
      FUI(RegularRounded.search),
      FUI(RegularRounded.bell),
    ],
  ),
)

Browse all icons

  • 🔎 Interactive gallery — search all 2,988 icons and copy the code snippet with one tap.
  • 📚 API reference — every constant is documented.
  • 🧰 Programmatically — each style class exposes an all map (kebab-case name → asset path), and FuiIcons.styles aggregates the six styles. Handy for building your own icon picker:
// All Regular Rounded icons:
for (final entry in RegularRounded.all.entries) {
  print('${entry.key} -> ${entry.value}');
}

// Every style:
FuiIcons.styles.forEach((styleName, icons) {
  print('$styleName has ${icons.length} icons');
});

Migrating from 2.0.x

Nothing breaks — your existing code keeps compiling. Two things were modernized in 2.1.0:

  1. Icon constants are now lowerCamelCase. The old SCREAMING_CASE constants still work but are deprecated and will be removed in 4.0.0:

    FUI(RegularRounded.ADDRESS_BOOK) // deprecated
    FUI(RegularRounded.addressBook)  // ✅ use this
    
  2. Icons now follow your theme. When you don't pass a color, the icon uses the ambient IconTheme color (previously it was tinted grey), and the default size honours IconTheme.size (24 in Material apps, previously a fixed 30). Pass color/width/height explicitly if you need the old values.

FAQ

Why don't I see the icon I expect? Check the gallery — names follow the original Flaticon UIcons naming. The same glyph exists in all 6 styles.

Can I use these icons commercially? Yes. The package code is MIT licensed and the icons come from Flaticon's open source UIcons collection. See the attribution note below.

How big is the package? The package bundles all 2,988 SVGs (~12 MB uncompressed) as Flutter assets. A future 3.0.0 release will ship the icons as icon fonts with full tree-shaking, so only the icons you use end up in your app binary. Follow the roadmap for progress.

License and attribution

  • Source code: MIT License © Baldomero Cho.
  • Icons: UIcons by Flaticon, used under their open source/free license. If you redistribute the icons outside this package, review Flaticon's license terms.

Contributing

Found a bug or want a new feature? Open an issue or a pull request on GitHub. If this package saves you time, a ⭐ on GitHub and a 👍 on pub.dev help others discover it.

所属分类

依赖

依赖清单 1 项

源码仓库

使用此插件的项目

暂无相关数据。