How to Increase the Size of a Custom Callout SVG Icon?

[fando32]

What I’m trying to do

I want to increase the size of a SVG I have in a custom callout css snippet:

.callout[data-callout="book-love"] { --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24" xml:space="preserve" width="24" height="24"><path d="M11.264 13.762a0.4 0.4 0 0 0 0.538 0.006c0.017 -0.015 0.352 -0.314 0.788 -0.754 0.34 0.35 0.627 0.622 0.762 0.748a0.4 0.4 0 0 0 0.538 0.006c0.482 -0.428 2.887 -2.634 2.887 -3.978a1.892 1.892 0 0 0 -1.89 -1.89 1.876 1.876 0 0 0 -1.263 0.484 1.876 1.876 0 0 0 -1.263 -0.484c-0.386 0 -0.745 0.116 -1.043 0.316a1.87 1.87 0 0 0 -1.045 -0.316c-1.03 0 -1.86 0.825 -1.89 1.878 -0.034 1.214 2.394 3.531 2.88 3.984zm2.021 -4.548c0.146 0.234 0.532 0.234 0.678 0a1.085 1.085 0 0 1 0.924 -0.514 1.091 1.091 0 0 1 1.09 1.09c0 0.667 -1.294 2.147 -2.348 3.133a19.849 19.849 0 0 1 -0.735 -0.75c-0.003 -0.004 -0.004 -0.008 -0.006 -0.011 -0.15 -0.161 -0.288 -0.314 -0.415 -0.458l-0.003 -0.004a13.795 13.795 0 0 1 -0.309 -0.367c-0.035 -0.043 -0.069 -0.086 -0.102 -0.129a9.865 9.865 0 0 1 -0.264 -0.35 6.918 6.918 0 0 1 -0.186 -0.272c-0.177 -0.276 -0.279 -0.49 -0.318 -0.641l-0.002 -0.008a0.502 0.502 0 0 1 -0.018 -0.132c0.002 -0.076 0.012 -0.15 0.027 -0.222 0.008 -0.036 0.022 -0.07 0.033 -0.106 0.011 -0.034 0.019 -0.07 0.033 -0.102 0.027 -0.063 0.06 -0.123 0.097 -0.18l0.004 -0.008c0.04 -0.06 0.086 -0.115 0.136 -0.166a1.066 1.066 0 0 1 0.76 -0.317c0.377 0 0.722 0.192 0.924 0.514zm-3.012 -0.514c0.169 0 0.333 0.039 0.481 0.112 -0.041 0.068 -0.077 0.138 -0.11 0.21 -0.008 0.018 -0.014 0.036 -0.022 0.054a1.951 1.951 0 0 0 -0.11 0.365 1.998 1.998 0 0 0 -0.042 0.338c-0.005 0.172 -0.013 0.608 0.739 1.632 0.023 0.031 0.045 0.062 0.068 0.093l0.067 0.087c0.22 0.288 0.459 0.572 0.697 0.838 -0.194 0.196 -0.369 0.365 -0.503 0.492 -1.19 -1.152 -2.371 -2.596 -2.356 -3.121 0.017 -0.617 0.496 -1.101 1.09 -1.101z"/><path d="M4.73 4.363v15.274a1.9 1.9 0 0 0 1.898 1.898h12.242a0.4 0.4 0 0 0 0.352 -0.589l-0.034 -0.063a2.637 2.637 0 0 1 -0.313 -1.237c0 -0.004 0.002 -0.006 0.002 -0.009 0 -0.006 -0.003 -0.01 -0.003 -0.016a2.636 2.636 0 0 1 0.343 -1.286c0.005 -0.009 0.007 -0.018 0.011 -0.028 0.005 -0.01 0.009 -0.021 0.013 -0.032a0.399 0.399 0 0 0 0.027 -0.133c0 -0.002 0.001 -0.003 0.001 -0.004V2.865a0.4 0.4 0 0 0 -0.4 -0.4H6.628a1.9 1.9 0 0 0 -1.898 1.898zm0.8 0c0 -0.464 0.29 -0.86 0.698 -1.02v14.44c-0.018 0.004 -0.033 0.012 -0.05 0.016a1.874 1.874 0 0 0 -0.554 0.234c-0.024 0.015 -0.048 0.027 -0.071 0.043 -0.007 0.005 -0.015 0.009 -0.022 0.014V4.363zm1.098 16.372a1.099 1.099 0 0 1 -1.098 -1.098 1.099 1.099 0 0 1 1.098 -1.098h11.626a3.408 3.408 0 0 0 -0.148 0.698H10.853a0.4 0.4 0 0 0 0 0.8h7.253c0.028 0.236 0.072 0.47 0.149 0.698H6.628zm11.842 -2.996H7.028V3.265h11.442v14.474z"/></svg>'; }

Things I have tried

I’ve tried adjusting the viewBox and width and height values to no avail.

I’ve been able to edit the icon size in developer’s tools, but I don’t know why it won’t change in css.

I’ve also looked around on this forum and reddit and couldn’t find an answer for this problem (The closest was probably the answers given in this thread:Callout (custom) SVG icons - #6 by alex-m-d).

I am an absolute beginner at making a css snippet, so perhaps I’m overlooking something obvious.

[woofy31]

You have to use an Obsidian CSS property called --icon-size inside your custom callout snippet:

--icon-size: 50px; /* increase to 50px for example */

You can see more exposed properties here: Obsidian Reference Docs

[fando32]

Thank you for the quick reply.

.callout[data-callout="book-love"] { --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24" xml:space="preserve" width="24" height="24"><path d="M11.264 13.762a0.4 0.4 0 0 0 0.538 0.006c0.017 -0.015 0.352 -0.314 0.788 -0.754 0.34 0.35 0.627 0.622 0.762 0.748a0.4 0.4 0 0 0 0.538 0.006c0.482 -0.428 2.887 -2.634 2.887 -3.978a1.892 1.892 0 0 0 -1.89 -1.89 1.876 1.876 0 0 0 -1.263 0.484 1.876 1.876 0 0 0 -1.263 -0.484c-0.386 0 -0.745 0.116 -1.043 0.316a1.87 1.87 0 0 0 -1.045 -0.316c-1.03 0 -1.86 0.825 -1.89 1.878 -0.034 1.214 2.394 3.531 2.88 3.984zm2.021 -4.548c0.146 0.234 0.532 0.234 0.678 0a1.085 1.085 0 0 1 0.924 -0.514 1.091 1.091 0 0 1 1.09 1.09c0 0.667 -1.294 2.147 -2.348 3.133a19.849 19.849 0 0 1 -0.735 -0.75c-0.003 -0.004 -0.004 -0.008 -0.006 -0.011 -0.15 -0.161 -0.288 -0.314 -0.415 -0.458l-0.003 -0.004a13.795 13.795 0 0 1 -0.309 -0.367c-0.035 -0.043 -0.069 -0.086 -0.102 -0.129a9.865 9.865 0 0 1 -0.264 -0.35 6.918 6.918 0 0 1 -0.186 -0.272c-0.177 -0.276 -0.279 -0.49 -0.318 -0.641l-0.002 -0.008a0.502 0.502 0 0 1 -0.018 -0.132c0.002 -0.076 0.012 -0.15 0.027 -0.222 0.008 -0.036 0.022 -0.07 0.033 -0.106 0.011 -0.034 0.019 -0.07 0.033 -0.102 0.027 -0.063 0.06 -0.123 0.097 -0.18l0.004 -0.008c0.04 -0.06 0.086 -0.115 0.136 -0.166a1.066 1.066 0 0 1 0.76 -0.317c0.377 0 0.722 0.192 0.924 0.514zm-3.012 -0.514c0.169 0 0.333 0.039 0.481 0.112 -0.041 0.068 -0.077 0.138 -0.11 0.21 -0.008 0.018 -0.014 0.036 -0.022 0.054a1.951 1.951 0 0 0 -0.11 0.365 1.998 1.998 0 0 0 -0.042 0.338c-0.005 0.172 -0.013 0.608 0.739 1.632 0.023 0.031 0.045 0.062 0.068 0.093l0.067 0.087c0.22 0.288 0.459 0.572 0.697 0.838 -0.194 0.196 -0.369 0.365 -0.503 0.492 -1.19 -1.152 -2.371 -2.596 -2.356 -3.121 0.017 -0.617 0.496 -1.101 1.09 -1.101z"/><path d="M4.73 4.363v15.274a1.9 1.9 0 0 0 1.898 1.898h12.242a0.4 0.4 0 0 0 0.352 -0.589l-0.034 -0.063a2.637 2.637 0 0 1 -0.313 -1.237c0 -0.004 0.002 -0.006 0.002 -0.009 0 -0.006 -0.003 -0.01 -0.003 -0.016a2.636 2.636 0 0 1 0.343 -1.286c0.005 -0.009 0.007 -0.018 0.011 -0.028 0.005 -0.01 0.009 -0.021 0.013 -0.032a0.399 0.399 0 0 0 0.027 -0.133c0 -0.002 0.001 -0.003 0.001 -0.004V2.865a0.4 0.4 0 0 0 -0.4 -0.4H6.628a1.9 1.9 0 0 0 -1.898 1.898zm0.8 0c0 -0.464 0.29 -0.86 0.698 -1.02v14.44c-0.018 0.004 -0.033 0.012 -0.05 0.016a1.874 1.874 0 0 0 -0.554 0.234c-0.024 0.015 -0.048 0.027 -0.071 0.043 -0.007 0.005 -0.015 0.009 -0.022 0.014V4.363zm1.098 16.372a1.099 1.099 0 0 1 -1.098 -1.098 1.099 1.099 0 0 1 1.098 -1.098h11.626a3.408 3.408 0 0 0 -0.148 0.698H10.853a0.4 0.4 0 0 0 0 0.8h7.253c0.028 0.236 0.072 0.47 0.149 0.698H6.628zm11.842 -2.996H7.028V3.265h11.442v14.474z"/></svg>'; --icon-size: 50px }

I tried pasting that property into the above code and it did not work. The size remains unchanged.

Did I not write the code correctly or is something else going wrong?

[fando32]

I checked the above code and there’s a ; missing at the end, but I added it .callout[data-callout="book-love"] { --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24" xml:space="preserve" width="24" height="24"><path d="M11.264 13.762a0.4 0.4 0 0 0 0.538 0.006c0.017 -0.015 0.352 -0.314 0.788 -0.754 0.34 0.35 0.627 0.622 0.762 0.748a0.4 0.4 0 0 0 0.538 0.006c0.482 -0.428 2.887 -2.634 2.887 -3.978a1.892 1.892 0 0 0 -1.89 -1.89 1.876 1.876 0 0 0 -1.263 0.484 1.876 1.876 0 0 0 -1.263 -0.484c-0.386 0 -0.745 0.116 -1.043 0.316a1.87 1.87 0 0 0 -1.045 -0.316c-1.03 0 -1.86 0.825 -1.89 1.878 -0.034 1.214 2.394 3.531 2.88 3.984zm2.021 -4.548c0.146 0.234 0.532 0.234 0.678 0a1.085 1.085 0 0 1 0.924 -0.514 1.091 1.091 0 0 1 1.09 1.09c0 0.667 -1.294 2.147 -2.348 3.133a19.849 19.849 0 0 1 -0.735 -0.75c-0.003 -0.004 -0.004 -0.008 -0.006 -0.011 -0.15 -0.161 -0.288 -0.314 -0.415 -0.458l-0.003 -0.004a13.795 13.795 0 0 1 -0.309 -0.367c-0.035 -0.043 -0.069 -0.086 -0.102 -0.129a9.865 9.865 0 0 1 -0.264 -0.35 6.918 6.918 0 0 1 -0.186 -0.272c-0.177 -0.276 -0.279 -0.49 -0.318 -0.641l-0.002 -0.008a0.502 0.502 0 0 1 -0.018 -0.132c0.002 -0.076 0.012 -0.15 0.027 -0.222 0.008 -0.036 0.022 -0.07 0.033 -0.106 0.011 -0.034 0.019 -0.07 0.033 -0.102 0.027 -0.063 0.06 -0.123 0.097 -0.18l0.004 -0.008c0.04 -0.06 0.086 -0.115 0.136 -0.166a1.066 1.066 0 0 1 0.76 -0.317c0.377 0 0.722 0.192 0.924 0.514zm-3.012 -0.514c0.169 0 0.333 0.039 0.481 0.112 -0.041 0.068 -0.077 0.138 -0.11 0.21 -0.008 0.018 -0.014 0.036 -0.022 0.054a1.951 1.951 0 0 0 -0.11 0.365 1.998 1.998 0 0 0 -0.042 0.338c-0.005 0.172 -0.013 0.608 0.739 1.632 0.023 0.031 0.045 0.062 0.068 0.093l0.067 0.087c0.22 0.288 0.459 0.572 0.697 0.838 -0.194 0.196 -0.369 0.365 -0.503 0.492 -1.19 -1.152 -2.371 -2.596 -2.356 -3.121 0.017 -0.617 0.496 -1.101 1.09 -1.101z"/><path d="M4.73 4.363v15.274a1.9 1.9 0 0 0 1.898 1.898h12.242a0.4 0.4 0 0 0 0.352 -0.589l-0.034 -0.063a2.637 2.637 0 0 1 -0.313 -1.237c0 -0.004 0.002 -0.006 0.002 -0.009 0 -0.006 -0.003 -0.01 -0.003 -0.016a2.636 2.636 0 0 1 0.343 -1.286c0.005 -0.009 0.007 -0.018 0.011 -0.028 0.005 -0.01 0.009 -0.021 0.013 -0.032a0.399 0.399 0 0 0 0.027 -0.133c0 -0.002 0.001 -0.003 0.001 -0.004V2.865a0.4 0.4 0 0 0 -0.4 -0.4H6.628a1.9 1.9 0 0 0 -1.898 1.898zm0.8 0c0 -0.464 0.29 -0.86 0.698 -1.02v14.44c-0.018 0.004 -0.033 0.012 -0.05 0.016a1.874 1.874 0 0 0 -0.554 0.234c-0.024 0.015 -0.048 0.027 -0.071 0.043 -0.007 0.005 -0.015 0.009 -0.022 0.014V4.363zm1.098 16.372a1.099 1.099 0 0 1 -1.098 -1.098 1.099 1.099 0 0 1 1.098 -1.098h11.626a3.408 3.408 0 0 0 -0.148 0.698H10.853a0.4 0.4 0 0 0 0 0.8h7.253c0.028 0.236 0.072 0.47 0.149 0.698H6.628zm11.842 -2.996H7.028V3.265h11.442v14.474z"/></svg>'; --icon-size: 50px; } and there’s still no success.

[woofy31]

It works fine with the default callout icons, so it appears that it doesn’t work with custom SVGs… In this case you have to do something like this:

.callout[data-callout="book-love"] { ... your existing code ... }

/* enlarge the icon */
.callout[data-callout="book-love"] .callout-icon {
  width: 42px; 
  height: 42px;
  transform-origin: left;
  transform: scale(2.5);
}

But you have to play with the scale, width & height until you find what you’re after.

[fando32]

Thank you so much, it finally worked thanks to that code.

.callout[data-callout="book-love"] .callout-icon {
  width: 24px; 
  height: 24px;
  transform-origin: left;
  transform: scale(1.5);
}