How to separate icons from the main library

Hi all!
I’m struggling with a problem and would love some advice from you on how to solve it.

Currently we have two libraries:

  1. Web - which is also kind of core library ( colors, shadows, typography, web components and… icons)
  2. Mobile - Android apps components

Unfortunately the decision that was made before to include the icons in the Web library is not optimal and I would love to move all of them to separate library, but I don’t know how to process with this task so all the projects that refer to these icons will be still connected even when we move them to new library.

Thank you for all the suggestions.

Hey, even though this process might not feel easy at first, in reality is very simple, it just takes a couple of steps to get done!

  • Make a duplicate of the Library where you have your Icons. Give it a unique name so you’re able to tell it apart.
  • Make sure to delete any other Components other than the Icons from this Library.
  • Upload this Library to the Workspace, and make sure it is enabled on Sketch (via Settings > Libraries).
  • Using Automate Sketch, you can replace the icons on your designs with the new Library.
    • With the Document where you want to replace the Icons (from the Old Library to the New one)
    • In the menubar: Plugins > Automate Sketch > Library > Replace Library

  • In the window, select what you’d like to replace (in this case Symbols)
  • Select the Library you would like to replace.
  • Lastly, select the Library you would like to replace it with.
  • Done!

This is basically an overview of all the steps needed to get this working, but if you have more questions or need more assistance with this, we’re always glad to help over at productsupport@sketch.com

:pray:

Hi @raulrincon!
Thank you for your replay. This have almost worked :sweat_smile:

I’ll try to explain what we have achieved.
Within the Main Symbols Library (MSL) we have symbols (for example buttons) that have icons that link to our new Icon Library (IL) (this was done with the solution that you’ve provided). On this level this works fine!

Unfortunately when we open a project that uses symbols from the MSL the icons nested within those symbols still are linked to the MSL and not to IL. Using the Automate plugin here to replace the imported symbols library changes the linkage of whole symbol and not just the icons.

Do you have any ideas on how to deal with this?

Thank you!

Hey!

Since these are nested Symbols (within Symbols), you’d have to:

  • Open the original Library (where the Symbols using the nested instances are)
  • Use Automate Sketch to replace the links there
  • Save the Library
  • Open the Document and perform the updates that might appear when you save the other Library.

This way the app will:

  • Update the links of the nested Symbols so it uses the new defined ones in the other Library
  • The new connections should appear now.

Let us know if that makes sense!

1 Like

Yes it does, but I think that I know where the problem is now. Symbols with icons that has not been overridden are ok, but those with icons change by override are not linked correctly. Is there a way to change that in bulk? Relink overrides to a new library?

Ahh, that makes more sense!

Sadly, we do not have a way to achieve this, since with Overrides, you can mix and match Libraries and more.

However, you might have some luck using the Automate Sketch function of Library > Library Update > Update Selected Symbol Overrides and see if that helps?

Let us know! :eyes:

Thanks, but that didn’t work. Only way I’ve found is to use Automate > Symbol > Find and Replace Symbol, but this will take ages :frowning:

Awh, that’s a bummer :frowning:

I’ll pass this feature request along to the team so they know this is something we’d definitely want to tackle in the future in regards to updating and working with Libraries.

1 Like