Vela UI Docs
venizia.ai

superscript

Superscript, one of the 856 Vela UI icons, in the General group: a 24px grid drawn in currentColor, so it takes the colour of the text around it. It installs on its own as @velaui/icon-superscript.

  • 16px
  • 20px
  • 24px
  • 32px

Installation

pnpm dlx velaui add @velaui/icon-superscript

Usage

// components/icons/superscript.tsx
import Superscript from "@/components/icons/superscript"

<Superscript className="size-5 text-muted" />

In use

  • In a button

  • In a sentence

    Due Friday, or whenever the venue confirms.

  • In an input

  • As a badge

    Scheduled

  • In an empty state

    No events on this day yet.

    Browse blocks

Source

import * as React from "react";

export interface SuperscriptProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Superscript({ size = 24, strokeWidth = 1, className, ref, ...props }: SuperscriptProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M2.40002 8.21213L8.08688 13.899M8.08688 13.899L13.7737 19.5858M8.08688 13.899L13.7737 8.21213M8.08688 13.899L2.40002 19.5858M16.9031 7.09727C16.9031 6.46075 17.156 5.8503 17.6061 5.40021C18.0562 4.95012 18.6666 4.69727 19.3031 4.69727C19.9397 4.69727 20.5501 4.95012 21.0002 5.40021C21.4503 5.8503 21.7031 6.46075 21.7031 7.09727C21.7031 7.80647 21.1031 8.29727 20.5031 8.89727L16.9031 11.8973H21.7031" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Superscript.displayName = "Superscript";

export default Superscript;