Iconography（アイコンビジュアル）

アイコングラフィは、情報を迅速かつ効果的に伝えるために使用できる視覚的なデザイン言語です。RinUI は、一貫したデザイン原則に従い、アプリケーションに簡単に統合できる包括的なアイコンセットを提供します。

Fluent System Icons5,656 / 5,656 個のアイコン

アイコンを検索

アイコンカテゴリすべてのカテゴリ操作・編集ナビゲーション・方向コミュニケーション・メール人物・組織ファイル・フォルダー画像・音声・動画レイアウト・文字組みテキスト・フォントデータ・チャートデバイス・画面システム・設定セキュリティ・プライバシー状態・通知天気・自然図形・記号交通・移動金融・決済ショッピング・商品食べ物・飲み物健康・医療教育・学習ゲーム・エンターテインメントアクセシビリティ絵文字・ステッカー建物・場所

apps_16_regular

アイコン名

ic_fluent_apps_16_regular

QML の使用例

name: "ic_fluent_apps_16_regular"

基本的なアイコンの使用

import RinUI

Icon {
    name: "ic_fluent_apps_16_regular"
    size: 24
}

異なるサイズのアイコン

Column {
    spacing: 8
    
    Icon {
        name: "ic_fluent_mail_16_regular"
        size: 16
    }
    
    Icon {
        name: "ic_fluent_mail_20_regular"
        size: 20
    }
    
    Icon {
        name: "ic_fluent_mail_24_regular"
        size: 24
    }
    
    Icon {
        name: "ic_fluent_mail_32_regular"
        size: 32
    }
}

色付きのアイコン

Row {
    spacing: 12
    
    Icon {
        name: "ic_fluent_checkmark_circle_24_regular"
        color: "#0078D4"
    }
    
    Icon {
        name: "ic_fluent_error_circle_24_regular"
        color: "#D83B01"
    }
    
    Icon {
        name: "ic_fluent_warning_24_regular"
        color: "#FF8C00"
    }
    
    Icon {
        name: "ic_fluent_info_circle_24_regular"
        color: "#0078D4"
    }
}

ボタン内のアイコン

Row {
    spacing: 12
    
    Button {
        icon.name: "ic_fluent_save_20_regular"
        text: qsTr("保存")
    }
    
    Button {
        icon.name: "ic_fluent_delete_20_regular"
        text: qsTr("削除")
    }
    
    ToolButton {
        icon.name: "ic_fluent_settings_20_regular"
    }
}

ナビゲーション内のアイコン

NavigationBar {
    items: [
        {
            title: qsTr("ホーム"),
            icon: "ic_fluent_home_24_regular"
        },
        {
            title: qsTr("検索"),
            icon: "ic_fluent_search_24_regular"
        },
        {
            title: qsTr("設定"),
            icon: "ic_fluent_settings_24_regular"
        }
    ]
}

重要なプロパティ

• name: アイコン名（例："ic_fluent_apps_16_regular"）
• size: アイコンサイズ（ピクセル）
• color: アイコン色
• visible: アイコンが表示されるかどうか
• enabled: アイコンが有効かどうか

一般的なアイコンカテゴリー

システムアイコン

• ic_fluent_apps_*: アプリケーションアイコン
• ic_fluent_settings_*: 設定アイコン
• ic_fluent_home_*: ホームアイコン

アクションアイコン

• ic_fluent_save_*: 保存アクション
• ic_fluent_delete_*: 削除アクション
• ic_fluent_edit_*: 編集アクション

ステータスアイコン

• ic_fluent_checkmark_*: 成功インジケーター
• ic_fluent_error_*: エラーインジケーター
• ic_fluent_warning_*: 警告インジケーター

ナビゲーションアイコン

• ic_fluent_home_*: ホームナビゲーション
• ic_fluent_arrow_*: 方向ナビゲーション
• ic_fluent_chevron_*: 展開/折りたたみインジケーター