SVG Library

import { CrossIcon, SparkleIcon } from "@/components/ui/squad-icons";

import { CrossIcon } from "@/components/ui/squad-icons";

export function Example() {
  return (
    <div className="flex items-center gap-4">
      {/* Width in px or any CSS length; height follows the aspect ratio. */}
      <CrossIcon size={48} />

      {/* Ink follows currentColor, so a text-* class recolours it. */}
      <CrossIcon size={48} className="text-primary" />

      {/* Accent fills read --sq-accent / --sq-accent-2 / --sq-paper. */}
      <CrossIcon size={48} accent="#FF8585" />
    </div>
  );
}

{/* Every piece is also served as a standalone file:
    https://sdk-components.thesqd.com/svg-library/<category>/<id>.svg
    Note: <img> blocks CSS recolouring; use the component when you need it. */}
<img src="https://sdk-components.thesqd.com/svg-library/icons/cross.svg" alt="" width={48} />