Custom SF Symbols with Illustrator

Anyone successful in creating custom SF Symbols with Adobe Illustrator?

I've been starting with a variable template, and moving margins mostly works, but if I then attempt to center artwork, it leads the resultant SVG as not being usable by SF Symbols app.

Specifics... I want one of my apps that uses icons for table view cells, to switch over to SF symbols. For most, I could take advtange of an Apple-supplied one. However, due to each symbol having a different margins, this leads to textual content in the cells not all being aligned.

So I thought I would copy the symbols as all being custom, exporting as a variable template, and adjusting the margins in Illustrator such that all margins were the same.

I also just tried a trial of Sketch. And while that didn't mess up the SVG, the feature set is too limited for my needs.

One other thing I just tried in Illustrator was starting with a variable template, deleting all three symbols, adjusting the margins to be on integral pixel boundaries, and then centering a simple square path in each area. Importing back into SF symbols though shows my square non-centered.

It shouldn't be this difficult.

Replies

Were you able to figure out a solution?

Same problem here using Illustrator. The concept is a nice try, but apparently the SVG editors outputs SVG in non-standard ways. I can't even add a single stroke to an existing SF Symbol and get it to import - not ready for primetime