loading...
Cover image for Custom bookmark icons in VSCode

Custom bookmark icons in VSCode

brianjdevries profile image Brian DeVries ・2 min read

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!

Posted on by:

brianjdevries profile

Brian DeVries

@brianjdevries

Web developer. Life-long learner. When I'm not programming, I enjoy woodworking and spending time with friends and family outdoors!

Discussion

pic
Editor guide
 

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 πŸ‘

 

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

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

 

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

 

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