--- title: "Choosing Icons for Tiles: Standard, File Type, App, Azure and Vitextra Icon Sets" description: "The five icon sets of the Vitextra Smart Tiles web part — Fluent UI standard icons, file type icons, Microsoft 365 app icons, Azure service icons and Vitextra product icons — how to pick an icon in the icon panel, how icon color, size, indent and shadow work, and when to use a custom image instead." url: https://vitextra.com/en/support/kb/10243 language: en published: 2026-10-09 modified: 2026-10-10 author: "Lidija Reising" tags: ["Smart Tiles icons", "Fluent UI icons SharePoint", "Microsoft 365 app icons tiles", "Azure icons web part", "file type icons SharePoint", "icon picker", "tile icon color", "icon size SharePoint tiles", "Vitextra product icons", "SharePoint navigation icons"] --- # Choosing Icons for Tiles: Standard, File Type, App, Azure and Vitextra Icon Sets The five icon sets of the Vitextra Smart Tiles web part — Fluent UI standard icons, file type icons, Microsoft 365 app icons, Azure service icons and Vitextra product icons — how to pick an icon in the icon panel, how icon color, size, indent and shadow work, and when to use a custom image instead. ## Introduction An icon is what makes a tile recognizable before its title is read: the Outlook logo, a PDF symbol, a telephone. [Smart Tiles](https://vitextra.com/en/products/smart-tiles) ships with five icon sets that cover the common cases of an intranet — generic symbols, document types, Microsoft 365 applications, Azure services and Vitextra products — and accepts any image of your own where the sets fall short. This article describes the sets, the icon panel and the settings that control how icons are drawn. ## The icon sets |::Set::|::Contents::|::Typical use::| |:---|:---|:---| |**Standard icon**|The Fluent UI icon font used throughout Microsoft 365: more than a thousand monochrome symbols — people, documents, calendars, settings, arrows and so on.|Generic destinations: *Help Desk*, *Holidays*, *Policies*.| |**File type icon**|The colored file type icons of SharePoint: Word, Excel, PowerPoint, PDF, images, archives and other formats.|Links to a specific document or template.| |**App Icon**|The product logos of Microsoft 365 applications: Outlook, Teams, OneDrive, Planner, Forms, Power BI and others.|Links that open an application or its web version.| |**Azure**|The icons of Azure services.|Portals for IT teams and developers.| |**Vitextra**|The icons of Vitextra products.|Links to pages built with other Vitextra web parts.| Standard icons are drawn in the **Font Color** of the tile, so a white standard icon on a blue tile becomes a blue icon on a white tile with a single color change. The other four sets are full-color images and keep their own colors on any background. ![One icon from each of the five sets](https://static.vitextra.com/articles/10243/icon-sets-en.png) *One icon from each of the five sets* ## Picking an icon 1. Open the page in edit mode and click the **…** button of the tile. 2. Point to **Tile Icon** and choose the set: **Standard icon**, **File type icon**, **App Icon**, **Azure** or **Vitextra**. 3. In the **Select icon** panel that opens on the right, scroll through the icons or type part of a name into the search box — *mail*, *calendar*, *xlsx*. 4. Click the icon and then **Apply**. The icon currently used by the tile is highlighted when the panel opens, which makes it easy to pick a related icon from the same set. ![The Select icon panel with a search applied](https://static.vitextra.com/articles/10243/select-icon-panel-en.png) *The Select icon panel with a search applied* 📝 **Note** A tile that links to a YouTube video shows a play button instead of its icon. The icon chosen for such a tile is kept and reappears if the link is changed to another address. ## Custom images The last item of the **Tile Icon** submenu, **Custom image**, replaces the icon with an image of your own — a company logo, a product picture or an icon drawn by your designers. The image is entered as a URL or picked from a document library of the site. Picking an icon from any of the five sets afterwards removes the custom image again. The procedure is described in [KB10244. Using a Custom Image as a Tile Icon](https://vitextra.com/en/support/kb/10244). ## Icon settings of the web part Four settings in the **Appearance** group of the property pane apply to the icons of all tiles: |::Setting::|::Effect::| |:---|:---| |**Icon size**|Six steps: 20, 24, 32, 40, 48 and 64 px. The size applies to every set and to custom images alike.| |**Icon Indent**|The space between the icon and the title, 0–30 px.| |**Shadow**|A soft drop shadow under the icon. It gives flat standard icons depth and lifts full-color icons off a background image.| |**Show Titles**|With titles hidden, the icon is centered in the tile and becomes its only content.| ![Icon size and shadow](https://static.vitextra.com/articles/10243/icon-size-shadow-en.png) *Icon size and shadow* 💡 **Tip** Keep to one set within a panel where possible. A row of monochrome standard icons in a single font color reads as one unit; a mix of standard, app and file type icons looks busier and draws the eye to the logos rather than to the titles. ❗ **Important** Icons from the sets are shipped with the web part, so they need no additional permissions. Custom images are loaded from the address you provide; visitors must have read access to that location. Learn more about the product: