【保存版】Fletアイコン一覧＆使い方｜バージョンで名前が変わってAIが誤爆する理由

CustomTkinterの記事は、「PythonのGUIライブラリはAIに書かせると見た目や書き方でつまずきやすい」という視点で書きました。同じ視点でPython製GUIライブラリを見渡していて目に留まったのが「Flet」です。Flutterをベースに、Pythonだけですっきりしてキレイな見た目のWeb・デスクトップアプリが作れると評判のライブラリなのですが、手を動かしてみると、真っ先にハマったのが「アイコン」でした。

ChatGPTやClaudeにアイコン付きボタンのコードを書かせたのに、実行するとAttributeErrorで止まる。コード自体は一見どこもおかしく見えないのに、なぜか動かない。調べていくと、Fletは過去に何度もアイコンの書き方(API)を変えてきたライブラリで、しかも記事執筆時点のわずか3日前に「Flet 1.0」という大規模な破壊的リニューアルが入ったばかりだと分かりました。AIが学習した大半のコード例は、当然その変更より前の書き方です。この記事では、アイコンの書き方がバージョンでどう変わってきたかを年表で整理しつつ、業務ツールでよく使うアイコンのカテゴリ別一覧、AIが間違えたコードを出したときの直し方までを、描画した画面のスクリーンショットとあわせて解説します。

「Fletでアイコンボタンを付けたらAIのコードがエラーになった」あるある

まずは典型的なつまずきパターンから見てみます。AIに「アイコン付きの追加ボタンを作って」と頼むと、次のようなコードが返ってくることがよくあります。

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.ElevatedButton(
            "追加",
            icon=ft.Icon(name=ft.Icons.ADD),
        )
    )

ft.app(target=main)

これをFlet 1.0の環境で試しに実行すると、次のようなエラーで止まります。

$ python app.py
Traceback (most recent call last):
  File "app.py", line 11, in <module>
    ft.app(target=main)
    ^^^^^^^^^^^^^^^^^^^^
AttributeError: module 'flet' has no attribute 'app'

一見するとAIのコードが間違っているように見えますが、実はそうではありません。ft.appというアプリ起動用の関数自体が、Flet 1.0でft.runに名前が変わっているのです。この記事執筆時点でFlet 1.0がリリースされたのはわずか3日前(2026年9月15日)なので、AIが学習したコード例のほとんどはまだft.app基準のままです。つまりこれは「AIの実力不足」というより「ライブラリ側の変化にAIの知識が追いついていない」という、生成AI時代ならではのつまずき方だと言えます。

そして厄介なことに、ft.appだけでなくアイコンの指定方法そのものも、Fletでは過去に何度も変わってきました。このあと順番に、アイコンの基本の書き方から、バージョンごとの変遷、AIが間違えたときの直し方までを見ていきます。

FletのIcon(ft.Icon)とは？Material Symbolsベースのアイコン表示の基本

まだFletをインストールしていない場合は、コマンドプロンプト(またはVSCodeのターミナル)で次のコマンドを実行してください。

pip install flet

インストールができたら、アイコンの表示方法を見ていきます。Fletでアイコンを表示するにはft.Iconコントロールを使います。中身はGoogleが提供する「Material Symbols(旧Material Icons)」というアイコンセットで、ft.Iconsという定数(Enum)経由で名前を指定します。

最小構成のコードは次の通りです。

import flet as ft


def main(page: ft.Page):
    page.title = "Flet Icon 基本サンプル"
    page.theme = ft.Theme(color_scheme_seed=ft.Colors.INDIGO)
    page.bgcolor = ft.Colors.WHITE
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.add(
        ft.Icon(icon=ft.Icons.FAVORITE, color=ft.Colors.RED_400, size=90),
        ft.Text("ft.Icon(icon=ft.Icons.FAVORITE, ...)", size=14, color=ft.Colors.GREY_600),
    )


ft.run(main, view=ft.AppView.WEB_BROWSER, port=8550)

ブラウザで開いてみると、次のようにハートのアイコンが描画されます。

• ft.Icon(...): アイコン単体を表示するコントロール
• icon=ft.Icons.FAVORITE: 表示するアイコンの種類を、Enum(ft.Icons)経由で指定する
• color= / size=: 色とサイズを個別に指定できる
• ft.run(main, ...): Flet 1.0でのアプリ起動方法。以前はft.app(target=main)だった

デザイナー目線で一言添えると、アイコンは単なる飾りではなく「文字を読まなくても意味が一瞬で伝わるラベル」です。選び方ひとつでUIの分かりやすさが変わるので、次の章で業務ツールでよく使うアイコンを場面別に整理します。

【保存版】Flet ft.Iconsのよく使うアイコン一覧(ナビゲーション/アクション/ステータス別)

ft.IconsにはMaterial Symbolsの全アイコン(数千種類)が定数として用意されていますが、業務ツールで使う頻度が高いのは一部に絞られます。ここでは「ナビゲーション系」「アクション系」「ステータス系」の3カテゴリに絞って、描画した一覧を紹介します。

import flet as ft

CATEGORIES = {
    "navigation": {
        "title": "ナビゲーション系アイコン",
        "color": ft.Colors.INDIGO,
        "icons": [
            ("HOME", ft.Icons.HOME),
            ("SEARCH", ft.Icons.SEARCH),
            ("MENU", ft.Icons.MENU),
            ("ARROW_BACK", ft.Icons.ARROW_BACK),
            ("PERSON", ft.Icons.PERSON),
            ("NOTIFICATIONS", ft.Icons.NOTIFICATIONS),
        ],
    },
    "action": {
        "title": "アクション系アイコン",
        "color": ft.Colors.TEAL,
        "icons": [
            ("ADD", ft.Icons.ADD),
            ("DELETE", ft.Icons.DELETE),
            ("SAVE", ft.Icons.SAVE),
            ("EDIT", ft.Icons.EDIT),
            ("SHARE", ft.Icons.SHARE),
            ("REFRESH", ft.Icons.REFRESH),
        ],
    },
    "status": {
        "title": "ステータス系アイコン",
        "color": ft.Colors.DEEP_ORANGE,
        "icons": [
            ("CHECK_CIRCLE", ft.Icons.CHECK_CIRCLE),
            ("WARNING", ft.Icons.WARNING),
            ("ERROR", ft.Icons.ERROR),
            ("INFO", ft.Icons.INFO),
            ("CANCEL", ft.Icons.CANCEL),
            ("TASK_ALT", ft.Icons.TASK_ALT),
        ],
    },
}


def make_card(label, icon, accent):
    return ft.Container(
        content=ft.Column(
            [
                ft.Icon(icon=icon, size=36, color=accent),
                ft.Text(label, size=11, color=ft.Colors.GREY_700, weight=ft.FontWeight.W_500),
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
            spacing=8,
        ),
        width=150,
        height=110,
        bgcolor=ft.Colors.WHITE,
        border_radius=14,
        border=ft.Border.all(1, ft.Colors.GREY_200),
        alignment=ft.Alignment.CENTER,
        shadow=ft.BoxShadow(blur_radius=8, color=ft.Colors.with_opacity(0.06, ft.Colors.BLACK)),
    )

このコードでカードを並べると、カテゴリごとに次のように表示されます。

ここに載せたのはあくまで業務ツールで頻出する一部です。全種類から探したい場合は、公式の「Flet Icons Browser」で名前を検索すると見つかります。正確な名前さえ分かれば、ft.Icons.xxxの形にしてそのまま使えます。

ft.icons→ft.Icons→Flet 1.0でなぜ変わった？アイコンAPIの変遷を年表で整理

Google検索で「Flet」と入力すると、セカンドワードの候補に「icon」「version」「1.0」「バージョン」が並びます。一見バラバラなキーワードに見えますが、調べてみるとこれらはすべて同じ根っこ、つまり「アイコンの書き方がバージョンのたびに変わり続けている」という一点に集約されることが分かりました。手元で検証しながら整理した変遷が次の図です。

• 〜Flet 0.24以前: アイコンはft.icons.addのような、モジュール直下にベタ書きされた約8000個の文字列定数だった
• Flet 0.25.0(2024年11月27日): icons/colorsがEnum化され、ft.icons.add→ft.Icons.ADDのように大文字クラス+定数のスタイルに変わった。これが最初の破壊的変更で、多くの旧チュートリアルの書き方がここで動かなくなった
• Flet 1.0(2026年9月15日、記事執筆時点で3日前): アプリ起動関数からアイコンの引数名、border/alignmentのヘルパー関数まで、広範囲のAPIが一斉に改名された

Flet 1.0で確認できた主な変更点をまとめると、次の表の通りです。

とくにft.ElevatedButtonの廃止は影響が大きいはずです。ほぼすべてのFletチュートリアルの最初の一歩で使われているコントロールなので、「AIに丸投げすると動かない」を体感する一番分かりやすいポイントになります。

AIが古いFletのアイコン名(ft.icons.xxx)を出してAttributeErrorになる理由と直し方

ここまでの内容を踏まえて、AIが生成したコードのエラーを手元で直していく一連の流れを4ステップで見てみます。

一連の流れをGIFにまとめると、次のようになります。

原因の切り分け方としては、エラーメッセージのAttributeError: module 'flet' has no attribute 'app'のように「モジュールに属性がない」という内容が出た場合は、まず自分のコードの書き間違いを疑う前に、インストールしているFletのバージョンと、参照しているコード例のバージョンがずれていないかを確認すると話が早いです。特にFlet 1.0のように直近でリリースされたばかりのメジャーバージョンでは、AIの学習データがまだ追いついていないケースが多いためです。

直し方は次の2ステップです。

1. pip show fletでインストール済みのFletのバージョンを確認する
2. 公式の移行ガイド・CHANGELOGで、使っている書き方が現行バージョンでどう変わったかを確認する

アイコンで見た目を垢抜けさせる3つのコツ(サイズ統一・配色・tooltip)

アイコンが正しく表示できるようになったら、次は見た目の質を上げるポイントです。同じアイコンでも、次の3点を揃えるだけで印象が大きく変わります。

1. サイズを統一する: 同じ並びのアイコンボタンはicon_sizeを揃える
2. 色をテーマカラーに揃える: バラバラの色を使わず、アクセントカラー1色(または濃淡)に統一する
3. アイコン単体のボタンには必ずtooltipを添える: 文字ラベルがない分、ホバーした時に何のボタンか分かるようにする(アクセシビリティの観点でも重要)

「Bad」と「Good」を並べて比較したのが次の画像です。

Good側のコードは次の通りです。

accent = ft.Colors.INDIGO

ft.Row(
    [
        ft.IconButton(icon=ft.Icons.ADD, icon_size=22, icon_color=accent, tooltip="追加"),
        ft.IconButton(icon=ft.Icons.DELETE, icon_size=22, icon_color=accent, tooltip="削除"),
        ft.IconButton(icon=ft.Icons.EDIT, icon_size=22, icon_color=accent, tooltip="編集"),
        ft.IconButton(icon=ft.Icons.SHARE, icon_size=22, icon_color=accent, tooltip="共有"),
    ],
    spacing=2,
)

icon_sizeとicon_colorをすべて同じ値に統一し、tooltipにボタンの役割を一言添えるだけで、統一感と親切さが両方手に入ります。Bad側のようにicon_sizeをバラバラ(18〜34)にしたり、色を思いつきで変えたりすると、途端に「素人っぽい画面」に見えてしまいます。

実践:TextFieldの検索窓とFilePickerのファイル選択ボタンにアイコンを添える

最後に、業務ツールでよくある「検索窓」と「ファイル選択ボタン」に、ここまでのアイコンの知識を使った実践コードです。VBAで言うところの「ユーザーフォームにコマンドボタンとテキストボックスを配置する」処理に近い内容になります。

import flet as ft


def main(page: ft.Page):
    page.title = "検索 + ファイル選択"
    page.theme = ft.Theme(color_scheme_seed=ft.Colors.INDIGO)
    page.bgcolor = ft.Colors.WHITE
    page.padding = 34

    selected_file_text = ft.Text("まだファイルは選択されていません", size=13, color=ft.Colors.GREY_500)

    def on_file_result(e: ft.FilePickerResultEvent):
        if e.files:
            selected_file_text.value = f"選択中のファイル: {e.files[0].name}"
            selected_file_text.color = ft.Colors.GREEN_700
        else:
            selected_file_text.value = "ファイルが選択されませんでした"
            selected_file_text.color = ft.Colors.GREY_500
        page.update()

    file_picker = ft.FilePicker(on_result=on_file_result)
    page.services.append(file_picker)

    search_field = ft.TextField(
        hint_text="顧客名で検索...",
        prefix_icon=ft.Icons.SEARCH,
        width=340,
        border_radius=10,
        border_color=ft.Colors.GREY_300,
        focused_border_color=ft.Colors.INDIGO,
        text_size=14,
    )

    page.add(
        ft.Text("顧客管理ダッシュボード", size=20, weight=ft.FontWeight.BOLD),
        ft.Container(height=18),
        ft.Row([search_field]),
        ft.Container(height=26),
        ft.Row(
            [
                ft.Button(
                    "Excelファイルを選択",
                    icon=ft.Icons.UPLOAD_FILE,
                    on_click=lambda _: file_picker.pick_files(
                        allow_multiple=False,
                        allowed_extensions=["xlsx", "xls", "csv"],
                    ),
                ),
            ]
        ),
        ft.Container(height=10),
        selected_file_text,
    )


ft.run(main, view=ft.AppView.WEB_BROWSER, port=8554)

ここでのポイントは2つあります。

• ft.TextFieldのprefix_iconにアイコンを指定すると、入力欄の左側に虫眼鏡アイコンが表示され、「検索欄である」ことが一目で伝わる
• ft.FilePickerはpage.overlayではなくpage.servicesに追加する。これもFlet 1.0での変更点で、旧バージョン基準のコードのままpage.overlay.append(file_picker)と書くと、実行時にUI上へ赤帯でUnknown control FilePickerと表示されて動きません

「検索欄への入力」→「ファイル選択ボタンのクリック」→「選択結果の表示」という、各ステップの画面は次のようになります。

各ステップをつなげたアニメーションが次のものです。

サンプルコードのダウンロード

この記事で紹介した4本のサンプルコード(基本のアイコン表示、カテゴリ別一覧、Before/After比較、検索+ファイル選択)は、まとめてダウンロードできます。

よくある質問（FAQ）

まとめ+次回予告

この記事では、FletのIconコントロールの基本から、アイコンの書き方がバージョンごとに変わってきた経緯、AIが古い書き方を出したときの直し方までを、動かした画面とあわせて紹介しました。

• Fletのアイコンはft.Icon(icon=ft.Icons.xxx)で表示する、Material Symbolsベースの部品
• アイコンの書き方はft.icons.add(文字列)→ft.Icons.ADD(Enum化)→Flet 1.0でさらに変化、と何度も変わってきた
• Flet 1.0(2026年9月15日リリース)ではft.app→ft.run、page.overlay→page.servicesなど広範囲のAPIが一斉に改名された
• AIのコードがエラーになったら、まずpip show fletでバージョンを確認し、公式ドキュメントで裏取りすると迷わない
• アイコンはサイズ・色を統一し、tooltipを添えるだけで見た目の質がぐっと上がる

アイコンまわりが解決すると、次に立ちはだかるのが「レイアウトの崩壊」です。Fletは「横並びの箱」「縦並びの箱」を入れ子にしていく設計のため、AIに複雑な画面を丸投げすると、意図しない崩れ方をすることがあります。次回はこの「Fletのネスト構造とAIの弱点」をテーマに、具体的な崩れ方と直し方のプロンプト例を紹介する予定です。