<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=545188) </details> <!--IssueSummary end--> # Problem to solve When using the context menu, make it easier to identify file languages by using their respective icons instead of the generic `document` icon. See https://gitlab.com/gitlab-org/editor-extensions/meta/-/issues/223 for more details on the problem and user feedback. ## Why it's important This will make it easier for users to scan and understand context sources when using Duo in the IDE. ## Proposal Use [the file icons](https://design.gitlab.com/product-foundations/iconography/#file-and-folder-type-icons) already specified in Pajamas. 1. Match file language icons when in the `File` category of the context menu (e.g. `HTML, CSS, JS`) 2. Also use these new icons in the context tokens ## Example | Description | Example | | ------ | ------ | | Context menu list | <img src="/uploads/4dfc994cf1707a0a258b5c3a78367f8a/Screenshot_2025-05-22_at_3.58.26_PM.png" width="300px"> | | Context token | <img src="/uploads/18a022843052fc346badd24eeece7651/Screenshot_2025-05-22_at_3.58.16_PM.png" width="300px"> | ## Important links - [Figma](https://www.figma.com/design/py1XaoxXhPpc1jFocBMUnx/%E2%AD%90-Duo-in-the-IDE--16983?node-id=3581-8990&t=qlJE8xkWORZTMdcK-1) - [Prototype iteration 3](https://prototyping-939024.gitlab.io/) (to illustrate the concept, not a 1:1 spec)