DEV Community

Cover image for Custom bookmark icons in VSCode
Brian DeVries
Brian DeVries

Posted on

Custom bookmark icons in VSCode

Background

I recently started learning web development on FreeCodeCamp. I found out about VScode and don't know how I survived without it! Anyone who is familiar with VScode knows how to add an extension, but sometimes the customization options aren't as well known.

I particularly like the bookmark feature in Visual Studio and wanted to have that functionality in VScode so I installed the Bookmarks extension. However, I didn't like the look of the default skinny blue bookmark on my dark background. I found out that there is a setting available so you can use a custom 16x16 pixel icon as your bookmark image!

This post is about how to add the bookmark extension and customize it, but I also created a github repo* of different colored bookmarks so you don't have to create your own if you don't want to.

*Note: The bookmark icons in the repo are modeled after the bookmark icon in Visual Studio 2017.

Customize the bookmark icon in VScode

  1. You'll need to install the bookmarks extension for VScode.
  2. Find a 16x16 pixel icon you want to use as a bookmark in VScode (or go ahead and clone/download the premade icons on my github) and put that image file in a local folder.
  3. Add this setting to the settings.json file in VScode:

    "bookmark.gutterIconPath": "c:\\path_to_icon\\icon.png"
    
  4. (Optional) Update the keybinding for 'Bookmark Toggle' to 'Ctrl+K Ctrl+K' (to mimic the Visual Studio IDE shortcut)

  5. Enjoy your customized bookmarks!

I hope you have as much fun customizing VScode to fit your style as I do! If you have any questions for me or just want to connect, comment below or message me on twitter! I enjoy talking with new people πŸ˜ƒ

Until next time, happy coding!

Discussion (4)

Collapse
alefragnani profile image
Alessandro Fragnani

I’m glad you like the extension. It’s one of my favorites πŸ˜‰.

With the recent iconography update in VSCode, I thought about updating that image too, using a border only visual, like the new Side Bar icon. Just an idea, for now.

In the next releases I will create another setting to customize the icon, just like my other Numbered Bookmarks extension, where you defines the color, and it creates the image on the fly. A bit easier than today to customize.

BTW, Congrats for you premade icons repo πŸ‘

Collapse
brianjdevries profile image
Brian DeVries Author

I'll be looking forward to that next release of the Bookmark Extension!

Thank you, I hope others find the icons to be useful πŸ˜ƒ

Collapse
abhijeetps profile image
Abhijeet Singh

Thanks for sharing. I was looking for some extension like this, and here I found it. πŸ™‚

Collapse
brianjdevries profile image
Brian DeVries Author

You're welcome! I'm glad you found it helpful 😁