The following seems to contain a spurious “]”
Nice catch ! Yes it should read
<$vars svg={{$:/core/images/tip}} fill=yellow> {{!!url}}
Eg; how could I go about changing the color of an icon in a core or custom button when naming the image?
Do you mean changing the color of an existing button with CSS only ?
This is a bit tricky .. using this method, you would target the element with CSS, then hide the SVG inside the button and use a pseudo-element after or before to display your custom SVG as the background image of the pseudo-element. I can try my hand at it tomorrow if you want 
The way I make use of it is for external links. If you want to display an icon to external links you would type :
.tc-tiddler-body a.tc-tiddlylink-external:after, a[target=_blank]:after{
content: " ";
margin-left:.5ch;
display: inline-block;
height:1em;
width:1em;
<$vars svg={{$:/core/images/open-window}} fill={{{ [{$:/palette}getindex[external-link-foreground]] }}} > {{!!url}}</$vars>
background: center / contain no-repeat var(--url);
}
.tc-tiddler-body a.tc-tiddlylink-external:visited:after { <$vars svg={{$:/core/images/open-window}} fill={{{ [{$:/palette}getindex[external-link-foreground-visited]] }}} > {{!!url}}</$vars>}
.tc-tiddler-body a.tc-tiddlylink-external:hover:after { <$vars svg={{$:/core/images/open-window}} fill={{{ [{$:/palette}getindex[foreground]] }}} > {{!!url}}</$vars>}
Without forgetting to fill the url field :
`--`url:url(<$text text={{{[['data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="]][<fill>][[" width="22pt" height="22pt">]][<svg>][[</svg>']]+[join[]]}}} />);
Result :
