logo
search
Others

How to Add Microsoft App Links or Icons to the Top of a SharePoint Page

Maira MehtabMaira Mehtab Oct 9, 2026 869 views

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.

How to Add Microsoft App Links or Icons to a SharePoint Page
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.
Before you start

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.

Solution 1Recommended

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.

1
Set up the development environment

Install Node.js, a code editor like VS Code, and the SharePoint Framework (SPFx) development toolchain (Yeoman SharePoint generator).

2
Create the web part project

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.

3
Package and deploy the solution

Bundle the solution using gulp and upload the resulting .sppkg file to your SharePoint tenant's App Catalog.

4
Add the web part to your page

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.

Develop a Custom SharePoint Framework (SPFx) Web Part
Community Guidance: For specific implementation code and guidance, consult the SharePoint Development community or look for open-source SPFx app launcher templates on GitHub.
Free Microsoft Office alternative

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. 1. Visit the official WPS website: Navigate to the official WPS Office website using your web browser.
  2. 2. Download the installer: Click the 'Free Download' button to download the setup file for your operating system.
  3. 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.
Fully compatible with Microsoft Word, Excel, and PowerPoint file formats (.docx, .xlsx, .pptx).Provides a familiar tabbed user interface, ensuring zero learning curve for teams migrating from other office suites.Extremely lightweight software that runs quickly even on older hardware.Includes powerful built-in PDF editing, merging, and conversion tools.
microsoft office alternative - wps office

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.