When uploading your SPFx web part to Microsoft Teams, one critical aspect that developers often overlook is the proper naming of icon files in the teams folder.
This issue is facing because of Icon Names Must Include Component ID
Your teams folder should contain two icon files, and their names must follow this exact format as described below.
Example
If your component ID is 146b0f6e-992e-484e-aa31-f1dab765f42eYour files should be named:
- 146b0f6e-992e-484e-aa31-f1dab765f42e_color.png
- 146b0f6e-992e-484e-aa31-f1dab765f42e_outline.png
Where to Find Your Component ID?
Open your web part manifest file located at:
./src/webparts/[YourWebPartName]/[YourWebPartName].manifest.json
Look for the "id" property - that's your component ID.
Why This Matters?
Using the component ID in icon file names ensures:
No naming conflicts with other web parts
Successful sync to Microsoft Teams
Proper packaging during deployment
-Correct association between icons and your web part
Common Mistake
❌ Wrong: myapp_color.png and myapp_outline.png
✅ Correct: [componentId]_color.png and [componentId]_outline.png
Below, I share the Quick Deployment Steps
Create your two icons with proper dimensions
Rename them using your component ID
Place them in the ./teams folder
Build and package your solution
Upload to SharePoint App Catalog
Click "Sync to Teams"
That's it! Remember, the icon naming convention is not optional - it's a requirement for successful deployment.
Best Practice
Always name your icon files with the component ID. This simple step will save you from deployment headaches later.