apple-svelte uses Material Symbols by default, but it also supports third-party symbol libraries. If you wish to use SF Symbols, you can use Apple's SF Pro Icons font but it's not recommended as it's against Apple's license agreement. You could also copy and paste glyphs from the SF Symbols app but it doesn't work well across all platforms.
If you use a third-party symbol library, don't forget to load the font into your HTML head.
<svelte:head>
<link rel="stylesheet" href="node_modules/apple-svelte/dist/styles.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
</svelte:head>
<style>
:root {
--symbol-font-family: 'Material Symbols Rounded';
--small-symbol-font-size-multiplier: 1.01680672269;
--medium-symbol-font-size-multiplier: 1.2840336134;
--large-symbol-font-size-multiplier: 1.6394957983;
}
</style>
Since not all libraries provide consistently sized symbols, you can edit the --small-symbol-font-size-multiplier, --medium-symbol-font-size-multiplier, and --large-symbol-font-size-multiplier variables to fix this.