How to change icons/symbols (in tab bar)

Share your knowledge Ask the community
1

sketch-question-symbols
sketch-question-symbols1076×1006 85 KB

Hi everyone!

I’m new to Sketch. I searched through this forum, also YouTube and Sketch’ knowledge base, but weren’t able to find an answer (maybe I use the wrong wording in my question.

So I inserted a tab bar from Apple’s UI kit. I have no idea how to change the default icons. There is an input-field with a question mark [?] and when I input text it will replace the default icon, but how can I add an actual icon?

I read there a no built-in icons in Sketch, but you can just copy the svg-code into Sketch and it will automatically be converted into the actual icon. I tried it and it worked, but when I input the svg-code into the input field (of the tab bar properties) it will only output 404. There is also no image-upload button or anything similar.

Thanks!

2

Hello and welcome to the Forum!

This is a great question. There are a couple of resources that’s recommended to download to your Mac to work with Apple Design resources: the SF Pro font and SF Symbols.

Apple libraries are built with them and in this particular case, SF symbols are the icons you find in the libraries.

You see a question mark in the text override input field because you don’t have SF Symbols in your Mac. After installing it, it’s really easy to use them:

  1. Launch the SF Symbols app
  2. Choose the icon you need and copy it
  3. Switch to Sketch and paste it in the input field
  4. Done!

Here’s a video, I hope it helps

3

Thanks a bunch, it worked perfectly!

1 Like