Microsoft 関連の Icon を Adaptive Card で使えないか調べてみたら CodePen で Icon URL 探すの便利だなと感じた記録

背景

Teams で Adaptive Card を利用する際にやっぱりアイコンあったほうがいいなと思い調べてみた

こんな感じのイメージ

色々アイコンページがあったので備忘録として下部にリンク貼っておく

すぐに Icon リンクが欲しい場合は以下から取得

codepen で、アプリ名、サイズでループさせて表示させられたら有るね！ってことでリンクを利用する。

Power Automate で Adaptive Card で Teams に送付する際は、SVG は使えないっぽいので PNG を利用

Power Platform 系のアイコンURLも若干追加

結論

リンクで使う場合

Fluent UI や Office Top の Icon Link を取得すればよさげ

この辺りに記載があるけど、Contents List があれば楽なんですが。
Fluent Icon の URL と size を一覧化してくれてるサイト

ただ、最新っぽくなかったので改造したのがこちら

画像URL取得方法

codepen を開いて、欲しい画像のURL取得するだけ

ここに右クリックメニューでのコピーを追加したほうがマシかと

こんな感じで

画像URL説明

アプリ一覧

['outlook', 'onedrive', 'word', 'excel', 'powerpoint', 'onenote', 'sharepoint', 'teams', 'office', 'access', 'delve', 'infopath', 'project', 'sway', 'visio', 'yammer']

以下の URL に 上記アプリ名入れて、対応するサイズを追加してるだけ。

svg

https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/svg/${app}_${size}x1.svg

png

https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/png/${app}_${size}x1.png

Office de

Do/Don't の記載もないけど、商用とかに使う場合はちゃんとライセンス条項とか調べてくださいな

ダウンロードして使う場合

Office365

fasttrack へログイン（開発者ライセンスでもログイン可能）

ガイドラインを読んで、ブランドツールキットをダウンロード

解凍すると、複数サイズが存在するので、ライセンス条項に従って利用可能

以下は、それぞれのページに利用条件等あるので確認して使いましょう

Microsoft 365 アーキテクチャのテンプレートとアイコン

Azure アーキテクチャ アイコン

Microsoft Dynamics 365 アイコン

Microsoft Power Platform アイコン

参考

Teams の Emoticons なら以下で

あとがき

Office Icon には日付が入ってるんですが、入ってる方が新しそうなのが不思議・・

Teams Icon @ Office

Teams Icon @ Fluent UI

でもって、ファイル名の Icon Size らしきものを編集すれば色々取れそう
Office Icon での例 16/20/24/32/48 はとりあえず取れた