FlutterでもLiquid Glass対応のアプリアイコンにしてみた
はじめに
iOS 26からLiquid Glassが導入されました。Apple純正アプリをはじめ、いくつかのアプリがLiquid Glass対応のUI/UXになっています。
アプリの中身だけでなく、アプリアイコンもLiquid Glassに対応させることができます。対応しているアイコンとそうでないアイコンがホーム画面に並ぶと、少し違和感がありますよね。
Flutterではflutter_launcher_iconsでアイコンを設定している方が多いと思いますが、現在(2025年12月21日時点)ではLiquid Glass対応のアイコンを生成する機能がありません。
そのため、この記事ではflutter_launcher_iconsパッケージを使用せずに、FlutterアプリのアイコンをiOS 26のLiquid Glassに対応させる方法を紹介します。
開発環境
- macOS 26.2
- Xcode 26.2
- Flutter 3.38.5
.iconファイルを用意する
Liquid Glass対応のアイコンには、.iconという新しい形式のファイルが必要です。
.iconファイルを作成する流れは以下の通りです。
- アイコンをレイヤーごとにSVGとして作成する
- Icon Composerで
.iconファイルを生成する
.iconファイルの作成をスキップしたい方は、以下のリポジトリからダウンロードできます。ファイルはios/Runner/AppIcon.iconにあります。
アイコンをレイヤーごとにSVGとして作成
.iconファイルはレイヤー構造になっているので、レイヤーごとに画像を用意する必要があります。
下記のようなアプリアイコンであれば「水色の円」と「ピンクの円」の2つの画像を用意するイメージです。
Appleがテンプレートを公開しているので、その中にあるFigmaのテンプレートを使った方法を本記事では紹介します。
レイヤーごとに要素を置いた後は、該当のレイヤーを選択して、SVGファイルとしてエクスポートします。
エクスポートされたファイルを確認すると、レイヤーごとにSVGファイルが生成されているはずです。
Icon Composerで.iconファイルを生成
Icon Composerというアプリを使って先ほど作成したSVGファイルから.iconファイルを生成していきます。
SVGファイルをアップロードした後、レイヤーごとにグループ分けします。必要に応じてオプションを調整し、デザインに満足したら「File」→「Save」で.iconファイルを保存します。
アプリアイコンを設定する
プロジェクトルートで以下のコマンドを実行し、Xcodeを開きます。
open ios/Runner.xcworkspace
「Runner」→「Runner」ディレクトリ配下に.iconファイルを追加します。
アプリをビルドすると、Liquid Glass対応のアプリアイコンになっているはずです🎉
Discussion