[ICON] Asterisk

[Jairus Joer]

Icon Request

• Icon name: Asterisk

  • Also known as a "required" icon/indicator for input fields.

• Use case:

  • Can be used to signal to the user that this particular input field or action is required.
  • Usable as an alternative to the * string character:
    

• Screenshots of similar icons:

as seen in Phosphor Icons

as seen in Bootstrap Icons

as seen in IBM UI icons

• Notable information:

  • The display of the Asterisk icon varies between 5 and 6 lines depending on the icon library.
    Some libraries also provide both options.

• Code examples:

five-pointed Asterisk:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M12 12V3"
    stroke="black"
    stroke-width="1.5"
    stroke-linecap="round"
  />
  <path
    d="M20.56 9.22L12 12"
    stroke="black"
    stroke-width="1.5"
    stroke-linecap="round"
  />
  <path
    d="M17.29 19.28L12 12"
    stroke="black"
    stroke-width="1.5"
    stroke-linecap="round"
  />
  <path
    d="M12.0001 12L3.44006 9.22"
    stroke="black"
    stroke-width="1.5"
    stroke-linecap="round"
  />
  <path
    d="M12 12L6.70996 19.28"
    stroke="black"
    stroke-width="1.5"
    stroke-linecap="round"
  />
</svg>

six-pointed Asterisk:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M12 3V20.9792"
    stroke="black"
    stroke-width="1.5"
    stroke-linecap="round"
  />
  <path
    d="M19.7853 7.49481L4.21479 16.4844"
    stroke="black"
    stroke-width="1.5"
    stroke-linecap="round"
  />
  <path
    d="M19.7853 16.4844L4.21479 7.49481"
    stroke="black"
    stroke-width="1.5"
    stroke-linecap="round"
  />
</svg>

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.