Back in 2019, Apple introduced SFSymbols: a rich set of glyphs in a common style designed for developers to use in their apps. At the same time, they added the ability for developers to create their own custom symbols that would get all of the same useful behaviors as those provided by Apple. These custom symbols are defined in SVG files.

SVG is a rich format, and often includes more data than is necessary just to render an image. SVGO is currently one of the most widely-used tools for optimizing SVG files by stripping out unnecessary information. Its default configuration does a great job of making SVG files substantially smaller while still ensuring that they render correctly.

Unfortunately, using this default configuration on the SVG files used to define an SFSymbol removes the non-rendering information that Xcode relies on to create that symbol. By turning off a few of the default optimizations that SVGO provides, however, one can still use it successfully to optimize all of the SVG files in an Xcode project. (This includes both those you’re using for custom symbols and any used as regular images.) Here’s the necessary configuration to get it to work correctly:

export default {
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            // disable a default plugin
            collapseGroups: false,
            cleanupIds: false
          },
        },
      },
    ],
  };
  

If you save that to svgo-config.mjs, you can then optimize all the SVGs in your Xcode project by running svgo --multipass --config svgo-config.mjs -rf . in your project’s root directory.