Splendid astro

Make lists with emoji bullets

Use the emoji property to create list items with emoji bullets.

<FancyList emoji="šŸ‘" items={[
  'bullet 1',
  'bullet 2',
  'bullet 3',
  'bullet 4'
]} />

Because Iā€™m Happy ~ā™Ŗ

Clap along if you:

  • šŸ‘ feel like a room without a roof
  • šŸ‘ feel like happiness is the truth
  • šŸ‘ know what happiness is to you
  • šŸ‘ feel like that's what you wanna do

Or SVG Icons

Choose from over 200,000 open source icons from the iconify project, including but not limited to Tabler, Phosphor, Material, and Carbon icons.

<FancyList icon="ph:check" items={[
  'bullet 1',
  'bullet 2',
  'bullet 3',
  'bullet 4'
]} />
  • Checklists
  • Made
  • Easy
  • Starlists
  • Too
  • And many other
  • Types of lists

Write list items in Markdown

This makes it much easier for you to create the list items that you want! (FancyList uses Markdown under the hood to achieve this).

<FancyList icon="ph:check" items={[
  '**Write**',
  '_in_',
  '[markdown](link)'
]}/>

Use different icons and emojis in the same list

Send visual, memorable, messages with the help of icons and emojis. Take your list-game up a level!

<FancyList items={[
  { emoji: 'šŸŽ', value: 'Apple' },
  { icon: 'tabler:blender', value: 'Blend them all ... ' },
]} />
  • šŸŽ Apple
  • šŸŒ Banana
  • šŸ„• Carrot
  • Blend them all and you get...
  • šŸ„¤ ABC Juice!

Style your SVGs

You can use simple-svg to help style your FancyList SVG icons. Just add the class and pop in your fill or stroke value!

<FancyList
  class="simple-svg"
  icon="ph:star-fill"
  style="--fill-color: lightpink"
>
  ...
</FancyList>
  • Starry
  • Starry
  • Night