サーバーサイドレンダリング

<pixiv-icon>はサーバーサイドレンダリング時にも利用できます。
@charcoal-ui/iconsは、Node.jsの環境下でimportされたり、APIを呼び出されても問題が起きないように設計されています。

一方、Custom Elementであるということは、SVGアイコンの読み込みはクライアントサイドで行われます。
したがって、大きさが確定せずにレイアウトシフトが起こりうるのは、SSRにおける注意点の一つと言えます。

以下のようなコードをリセットCSSに含めることで、<pixiv-icon>によるレイアウトシフトの発生を防ぐことができます。
（簡単のため、ネスト記法が利用できるケースを念頭に説明をしています）

pixiv-icon {
  display: inline-flex;
  width: calc(var(--icon-size, 1em) * var(--scale, 1));
  height: calc(var(--icon-size, 1em) * var(--scale, 1));

  &[name^='16/'] {
    --icon-size: 16px;
  }

  &[name^='24/'] {
    --icon-size: 24px;
  }

  &[name^='32/'] {
    --icon-size: 32px;
  }

  &[scale='2'] {
    --scale: 2;
  }

  &[scale='3'] {
    --scale: 3;
  }

  /** NOTICE: 現状だと attr(... number) はほとんどのブラウザで動かない */
  &[unsafe-non-guideline-scale] {
    --scale: attr(unsafe-non-guideline-scale number);
  }
}

ただしコメントにもある通り、現状unsafe-non-guideline-scaleをつけた要素は、リセットCSSだけではレイアウトシフトが防げません。
CSSのattr()が数値の解釈をサポートするまでは、個別にインラインスタイルを用いて大きさを確定させるなどのワークアラウンドが必要です。

<pixiv-icon name="24/Add" unsafe-non-guideline-scale="0.5" style="--scale: 0.5;">

<pixiv-icon name="24/Add" unsafe-non-guideline-scale="0.5" style="width: 12px; height: 12px;">