How to Add Microsoft App Links or Icons to the Top of a SharePoint Page
Question details
The user wants to create a custom interface at the top of a SharePoint page that displays clickable icons linking to Microsoft 365 applications like Word, Outlook, and PowerPoint.

- Product
- Microsoft SharePoint
- Device & OS
- not provided
- Scenario
- Customizing a SharePoint intranet or team site page to give users quick, visible access to essential Microsoft 365 applications.
- Observed behavior
- SharePoint does not automatically provide a custom Microsoft 365 app launcher across the top of individual pages out of the box.
Ensure you have Site Owner or Designer permissions to edit the SharePoint page. If you are deploying custom code, confirm that your organization's SharePoint administrator allows custom SharePoint Framework (SPFx) web parts on the tenant.
Develop a Custom SharePoint Framework (SPFx) Web Part
Create and deploy a dedicated custom web part that mimics the Microsoft 365 app launcher, providing a tailored user interface across the top of your page.
This solution requires development knowledge (HTML, CSS, TypeScript, and React) and administrative access to the SharePoint App Catalog. It provides the most flexibility for designing a custom navigation bar.
Install Node.js, a code editor like VS Code, and the SharePoint Framework (SPFx) development toolchain (Yeoman SharePoint generator).
Run the Yeoman generator to scaffold a new SPFx web part. Design the UI to display a horizontal row of app icons pointing to the direct URLs of Word, PowerPoint, and Outlook.
Bundle the solution using gulp and upload the resulting .sppkg file to your SharePoint tenant's App Catalog.
Navigate to your SharePoint page, click 'Edit', hover over the top section to click the '+' icon, and select your newly deployed custom web part from the menu.

Use the Built-in Quick Links Web Part (No-Code Workaround)
Use SharePoint's out-of-the-box Quick Links web part to create a highly visible, icon-based navigation bar without needing custom development.
Try WPS Office for Lightweight Document Management
While customizing your SharePoint intranet for team access, you might also need a cost-effective, full-featured desktop office suite. WPS Office is a lightweight, free alternative to Microsoft Office that handles standard document workflows seamlessly.
- 1. Visit the official WPS website: Navigate to the official WPS Office website using your web browser.
- 2. Download the installer: Click the 'Free Download' button to download the setup file for your operating system.
- 3. Install and launch: Run the downloaded installer, follow the on-screen prompts to complete the installation, and open WPS Office to start working on your documents.

Frequently Asked Questions
Can I modify the default Microsoft 365 app launcher (the waffle icon) instead of building a web part?
Yes, but this requires Microsoft 365 Administrator privileges. Admins can pin custom apps and links to the default app launcher via the Microsoft 365 admin center under Settings > Org settings > Organization profile > Custom app launcher tiles.
Why can't I see my deployed custom SPFx web part in the SharePoint edit menu?
If the custom web part is not showing up, ensure that it has been successfully deployed without errors in the tenant App Catalog, and that the app has been added to the specific site's contents.
What are the direct URLs to link to online Microsoft 365 apps?
You can use direct web links for the Quick Links web part. Use 'https://www.office.com/launch/word' for Word, 'https://www.office.com/launch/powerpoint' for PowerPoint, and 'https://outlook.office.com' for Outlook.
Is it possible to target specific app links to certain users?
Yes, if you use the out-of-the-box Quick Links web part, you can enable 'Audience targeting' in the web part settings. This allows you to show specific app links only to selected Microsoft 365 groups or security groups.




