zhanghuiqing
/
official_revision
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
方诺官网改正版
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
9 Commits
2 Branches
27 MiB
 
 
 
Tree: 61ddf909cb
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '61ddf909cb'
${ noResults }
official_revision/src/views/Icon.vue

1158 lines
54 KiB
Raw Blame History 

  1. <template>

  2.   <div>

  3.     <div class="intro-y flex items-center mt-8">

  4.       <h2 class="text-lg font-medium mr-auto">Feather Icons</h2>

  5.     </div>

  6.     <!-- BEGIN: Icon List -->

  7.     <div

  8.       class="intro-y grid grid-cols-12 sm:gap-6 row-gap-6 box px-5 py-8 mt-5"

  9.     >

  10.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  11.         <ActivityIcon class="mx-auto" />

  12.         <div class="text-center text-xs mt-2">ActivityIcon</div>

  13.       </div>

  14.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  15.         <AirplayIcon class="mx-auto" />

  16.         <div class="text-center text-xs mt-2">AirplayIcon</div>

  17.       </div>

  18.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  19.         <AlertCircleIcon class="mx-auto" />

  20.         <div class="text-center text-xs mt-2">AlertCircleIcon</div>

  21.       </div>

  22.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  23.         <AlertOctagonIcon class="mx-auto" />

  24.         <div class="text-center text-xs mt-2">AlertOctagonIcon</div>

  25.       </div>

  26.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  27.         <AlertTriangleIcon class="mx-auto" />

  28.         <div class="text-center text-xs mt-2">AlertTriangleIcon</div>

  29.       </div>

  30.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  31.         <AlignCenterIcon class="mx-auto" />

  32.         <div class="text-center text-xs mt-2">AlignCenterIcon</div>

  33.       </div>

  34.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  35.         <AlignJustifyIcon class="mx-auto" />

  36.         <div class="text-center text-xs mt-2">AlignJustifyIcon</div>

  37.       </div>

  38.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  39.         <AlignLeftIcon class="mx-auto" />

  40.         <div class="text-center text-xs mt-2">AlignLeftIcon</div>

  41.       </div>

  42.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  43.         <AlignRightIcon class="mx-auto" />

  44.         <div class="text-center text-xs mt-2">AlignRightIcon</div>

  45.       </div>

  46.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  47.         <AnchorIcon class="mx-auto" />

  48.         <div class="text-center text-xs mt-2">AnchorIcon</div>

  49.       </div>

  50.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  51.         <ApertureIcon class="mx-auto" />

  52.         <div class="text-center text-xs mt-2">ApertureIcon</div>

  53.       </div>

  54.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  55.         <ArchiveIcon class="mx-auto" />

  56.         <div class="text-center text-xs mt-2">ArchiveIcon</div>

  57.       </div>

  58.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  59.         <ArrowDownCircleIcon class="mx-auto" />

  60.         <div class="text-center text-xs mt-2">ArrowDownCircleIcon</div>

  61.       </div>

  62.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  63.         <ArrowDownLeftIcon class="mx-auto" />

  64.         <div class="text-center text-xs mt-2">ArrowDownLeftIcon</div>

  65.       </div>

  66.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  67.         <ArrowDownRightIcon class="mx-auto" />

  68.         <div class="text-center text-xs mt-2">ArrowDownRightIcon</div>

  69.       </div>

  70.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  71.         <ArrowDownIcon class="mx-auto" />

  72.         <div class="text-center text-xs mt-2">ArrowDownIcon</div>

  73.       </div>

  74.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  75.         <ArrowLeftCircleIcon class="mx-auto" />

  76.         <div class="text-center text-xs mt-2">ArrowLeftCircleIcon</div>

  77.       </div>

  78.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  79.         <ArrowLeftIcon class="mx-auto" />

  80.         <div class="text-center text-xs mt-2">ArrowLeftIcon</div>

  81.       </div>

  82.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  83.         <ArrowRightCircleIcon class="mx-auto" />

  84.         <div class="text-center text-xs mt-2">ArrowRightCircleIcon</div>

  85.       </div>

  86.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  87.         <ArrowRightIcon class="mx-auto" />

  88.         <div class="text-center text-xs mt-2">ArrowRightIcon</div>

  89.       </div>

  90.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  91.         <ArrowUpCircleIcon class="mx-auto" />

  92.         <div class="text-center text-xs mt-2">ArrowUpCircleIcon</div>

  93.       </div>

  94.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  95.         <ArrowUpLeftIcon class="mx-auto" />

  96.         <div class="text-center text-xs mt-2">ArrowUpLeftIcon</div>

  97.       </div>

  98.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  99.         <ArrowUpRightIcon class="mx-auto" />

  100.         <div class="text-center text-xs mt-2">ArrowUpRightIcon</div>

  101.       </div>

  102.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  103.         <ArrowUpIcon class="mx-auto" />

  104.         <div class="text-center text-xs mt-2">ArrowUpIcon</div>

  105.       </div>

  106.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  107.         <AtSignIcon class="mx-auto" />

  108.         <div class="text-center text-xs mt-2">AtSignIcon</div>

  109.       </div>

  110.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  111.         <AwardIcon class="mx-auto" />

  112.         <div class="text-center text-xs mt-2">AwardIcon</div>

  113.       </div>

  114.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  115.         <BarChart2Icon class="mx-auto" />

  116.         <div class="text-center text-xs mt-2">BarChart2Icon</div>

  117.       </div>

  118.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  119.         <BarChartIcon class="mx-auto" />

  120.         <div class="text-center text-xs mt-2">BarChartIcon</div>

  121.       </div>

  122.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  123.         <BatteryChargingIcon class="mx-auto" />

  124.         <div class="text-center text-xs mt-2">BatteryChargingIcon</div>

  125.       </div>

  126.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  127.         <BatteryIcon class="mx-auto" />

  128.         <div class="text-center text-xs mt-2">BatteryIcon</div>

  129.       </div>

  130.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  131.         <BellOffIcon class="mx-auto" />

  132.         <div class="text-center text-xs mt-2">BellOffIcon</div>

  133.       </div>

  134.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  135.         <BellIcon class="mx-auto" />

  136.         <div class="text-center text-xs mt-2">BellIcon</div>

  137.       </div>

  138.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  139.         <BluetoothIcon class="mx-auto" />

  140.         <div class="text-center text-xs mt-2">BluetoothIcon</div>

  141.       </div>

  142.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  143.         <BoldIcon class="mx-auto" />

  144.         <div class="text-center text-xs mt-2">BoldIcon</div>

  145.       </div>

  146.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  147.         <BookOpenIcon class="mx-auto" />

  148.         <div class="text-center text-xs mt-2">BookOpenIcon</div>

  149.       </div>

  150.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  151.         <BookIcon class="mx-auto" />

  152.         <div class="text-center text-xs mt-2">BookIcon</div>

  153.       </div>

  154.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  155.         <BookmarkIcon class="mx-auto" />

  156.         <div class="text-center text-xs mt-2">BookmarkIcon</div>

  157.       </div>

  158.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  159.         <BoxIcon class="mx-auto" />

  160.         <div class="text-center text-xs mt-2">BoxIcon</div>

  161.       </div>

  162.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  163.         <BriefcaseIcon class="mx-auto" />

  164.         <div class="text-center text-xs mt-2">BriefcaseIcon</div>

  165.       </div>

  166.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  167.         <CalendarIcon class="mx-auto" />

  168.         <div class="text-center text-xs mt-2">CalendarIcon</div>

  169.       </div>

  170.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  171.         <CameraOffIcon class="mx-auto" />

  172.         <div class="text-center text-xs mt-2">CameraOffIcon</div>

  173.       </div>

  174.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  175.         <CameraIcon class="mx-auto" />

  176.         <div class="text-center text-xs mt-2">CameraIcon</div>

  177.       </div>

  178.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  179.         <CastIcon class="mx-auto" />

  180.         <div class="text-center text-xs mt-2">CastIcon</div>

  181.       </div>

  182.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  183.         <CheckCircleIcon class="mx-auto" />

  184.         <div class="text-center text-xs mt-2">CheckCircleIcon</div>

  185.       </div>

  186.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  187.         <CheckSquareIcon class="mx-auto" />

  188.         <div class="text-center text-xs mt-2">CheckSquareIcon</div>

  189.       </div>

  190.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  191.         <CheckIcon class="mx-auto" />

  192.         <div class="text-center text-xs mt-2">CheckIcon</div>

  193.       </div>

  194.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  195.         <ChevronDownIcon class="mx-auto" />

  196.         <div class="text-center text-xs mt-2">ChevronDownIcon</div>

  197.       </div>

  198.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  199.         <ChevronLeftIcon class="mx-auto" />

  200.         <div class="text-center text-xs mt-2">ChevronLeftIcon</div>

  201.       </div>

  202.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  203.         <ChevronRightIcon class="mx-auto" />

  204.         <div class="text-center text-xs mt-2">ChevronRightIcon</div>

  205.       </div>

  206.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  207.         <ChevronUpIcon class="mx-auto" />

  208.         <div class="text-center text-xs mt-2">ChevronUpIcon</div>

  209.       </div>

  210.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  211.         <ChevronsDownIcon class="mx-auto" />

  212.         <div class="text-center text-xs mt-2">ChevronsDownIcon</div>

  213.       </div>

  214.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  215.         <ChevronsLeftIcon class="mx-auto" />

  216.         <div class="text-center text-xs mt-2">ChevronsLeftIcon</div>

  217.       </div>

  218.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  219.         <ChevronsRightIcon class="mx-auto" />

  220.         <div class="text-center text-xs mt-2">ChevronsRightIcon</div>

  221.       </div>

  222.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  223.         <ChevronsUpIcon class="mx-auto" />

  224.         <div class="text-center text-xs mt-2">ChevronsUpIcon</div>

  225.       </div>

  226.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  227.         <ChromeIcon class="mx-auto" />

  228.         <div class="text-center text-xs mt-2">ChromeIcon</div>

  229.       </div>

  230.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  231.         <CircleIcon class="mx-auto" />

  232.         <div class="text-center text-xs mt-2">CircleIcon</div>

  233.       </div>

  234.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  235.         <ClipboardIcon class="mx-auto" />

  236.         <div class="text-center text-xs mt-2">ClipboardIcon</div>

  237.       </div>

  238.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  239.         <ClockIcon class="mx-auto" />

  240.         <div class="text-center text-xs mt-2">ClockIcon</div>

  241.       </div>

  242.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  243.         <CloudDrizzleIcon class="mx-auto" />

  244.         <div class="text-center text-xs mt-2">CloudDrizzleIcon</div>

  245.       </div>

  246.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  247.         <CloudLightningIcon class="mx-auto" />

  248.         <div class="text-center text-xs mt-2">CloudLightningIcon</div>

  249.       </div>

  250.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  251.         <CloudOffIcon class="mx-auto" />

  252.         <div class="text-center text-xs mt-2">CloudOffIcon</div>

  253.       </div>

  254.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  255.         <CloudRainIcon class="mx-auto" />

  256.         <div class="text-center text-xs mt-2">CloudRainIcon</div>

  257.       </div>

  258.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  259.         <CloudSnowIcon class="mx-auto" />

  260.         <div class="text-center text-xs mt-2">CloudSnowIcon</div>

  261.       </div>

  262.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  263.         <CloudIcon class="mx-auto" />

  264.         <div class="text-center text-xs mt-2">CloudIcon</div>

  265.       </div>

  266.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  267.         <CodeIcon class="mx-auto" />

  268.         <div class="text-center text-xs mt-2">CodeIcon</div>

  269.       </div>

  270.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  271.         <CodepenIcon class="mx-auto" />

  272.         <div class="text-center text-xs mt-2">CodepenIcon</div>

  273.       </div>

  274.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  275.         <CodesandboxIcon class="mx-auto" />

  276.         <div class="text-center text-xs mt-2">CodesandboxIcon</div>

  277.       </div>

  278.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  279.         <CoffeeIcon class="mx-auto" />

  280.         <div class="text-center text-xs mt-2">CoffeeIcon</div>

  281.       </div>

  282.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  283.         <ColumnsIcon class="mx-auto" />

  284.         <div class="text-center text-xs mt-2">ColumnsIcon</div>

  285.       </div>

  286.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  287.         <CommandIcon class="mx-auto" />

  288.         <div class="text-center text-xs mt-2">CommandIcon</div>

  289.       </div>

  290.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  291.         <CompassIcon class="mx-auto" />

  292.         <div class="text-center text-xs mt-2">CompassIcon</div>

  293.       </div>

  294.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  295.         <CopyIcon class="mx-auto" />

  296.         <div class="text-center text-xs mt-2">CopyIcon</div>

  297.       </div>

  298.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  299.         <CornerDownLeftIcon class="mx-auto" />

  300.         <div class="text-center text-xs mt-2">CornerDownLeftIcon</div>

  301.       </div>

  302.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  303.         <CornerDownRightIcon class="mx-auto" />

  304.         <div class="text-center text-xs mt-2">CornerDownRightIcon</div>

  305.       </div>

  306.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  307.         <CornerLeftDownIcon class="mx-auto" />

  308.         <div class="text-center text-xs mt-2">CornerLeftDownIcon</div>

  309.       </div>

  310.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  311.         <CornerLeftUpIcon class="mx-auto" />

  312.         <div class="text-center text-xs mt-2">CornerLeftUpIcon</div>

  313.       </div>

  314.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  315.         <CornerRightDownIcon class="mx-auto" />

  316.         <div class="text-center text-xs mt-2">CornerRightDownIcon</div>

  317.       </div>

  318.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  319.         <CornerRightUpIcon class="mx-auto" />

  320.         <div class="text-center text-xs mt-2">CornerRightUpIcon</div>

  321.       </div>

  322.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  323.         <CornerUpLeftIcon class="mx-auto" />

  324.         <div class="text-center text-xs mt-2">CornerUpLeftIcon</div>

  325.       </div>

  326.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  327.         <CornerUpRightIcon class="mx-auto" />

  328.         <div class="text-center text-xs mt-2">CornerUpRightIcon</div>

  329.       </div>

  330.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  331.         <CpuIcon class="mx-auto" />

  332.         <div class="text-center text-xs mt-2">CpuIcon</div>

  333.       </div>

  334.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  335.         <CreditCardIcon class="mx-auto" />

  336.         <div class="text-center text-xs mt-2">CreditCardIcon</div>

  337.       </div>

  338.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  339.         <CropIcon class="mx-auto" />

  340.         <div class="text-center text-xs mt-2">CropIcon</div>

  341.       </div>

  342.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  343.         <CrosshairIcon class="mx-auto" />

  344.         <div class="text-center text-xs mt-2">CrosshairIcon</div>

  345.       </div>

  346.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  347.         <DatabaseIcon class="mx-auto" />

  348.         <div class="text-center text-xs mt-2">DatabaseIcon</div>

  349.       </div>

  350.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  351.         <DeleteIcon class="mx-auto" />

  352.         <div class="text-center text-xs mt-2">DeleteIcon</div>

  353.       </div>

  354.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  355.         <DiscIcon class="mx-auto" />

  356.         <div class="text-center text-xs mt-2">DiscIcon</div>

  357.       </div>

  358.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  359.         <DivideCircleIcon class="mx-auto" />

  360.         <div class="text-center text-xs mt-2">DivideCircleIcon</div>

  361.       </div>

  362.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  363.         <DivideSquareIcon class="mx-auto" />

  364.         <div class="text-center text-xs mt-2">DivideSquareIcon</div>

  365.       </div>

  366.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  367.         <DivideIcon class="mx-auto" />

  368.         <div class="text-center text-xs mt-2">DivideIcon</div>

  369.       </div>

  370.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  371.         <DollarSignIcon class="mx-auto" />

  372.         <div class="text-center text-xs mt-2">DollarSignIcon</div>

  373.       </div>

  374.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  375.         <DownloadCloudIcon class="mx-auto" />

  376.         <div class="text-center text-xs mt-2">DownloadCloudIcon</div>

  377.       </div>

  378.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  379.         <DownloadIcon class="mx-auto" />

  380.         <div class="text-center text-xs mt-2">DownloadIcon</div>

  381.       </div>

  382.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  383.         <DribbbleIcon class="mx-auto" />

  384.         <div class="text-center text-xs mt-2">DribbbleIcon</div>

  385.       </div>

  386.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  387.         <DropletIcon class="mx-auto" />

  388.         <div class="text-center text-xs mt-2">DropletIcon</div>

  389.       </div>

  390.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  391.         <Edit2Icon class="mx-auto" />

  392.         <div class="text-center text-xs mt-2">Edit2Icon</div>

  393.       </div>

  394.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  395.         <Edit3Icon class="mx-auto" />

  396.         <div class="text-center text-xs mt-2">Edit3Icon</div>

  397.       </div>

  398.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  399.         <EditIcon class="mx-auto" />

  400.         <div class="text-center text-xs mt-2">EditIcon</div>

  401.       </div>

  402.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  403.         <ExternalLinkIcon class="mx-auto" />

  404.         <div class="text-center text-xs mt-2">ExternalLinkIcon</div>

  405.       </div>

  406.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  407.         <EyeOffIcon class="mx-auto" />

  408.         <div class="text-center text-xs mt-2">EyeOffIcon</div>

  409.       </div>

  410.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  411.         <EyeIcon class="mx-auto" />

  412.         <div class="text-center text-xs mt-2">EyeIcon</div>

  413.       </div>

  414.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  415.         <FacebookIcon class="mx-auto" />

  416.         <div class="text-center text-xs mt-2">FacebookIcon</div>

  417.       </div>

  418.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  419.         <FastForwardIcon class="mx-auto" />

  420.         <div class="text-center text-xs mt-2">FastForwardIcon</div>

  421.       </div>

  422.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  423.         <FeatherIcon class="mx-auto" />

  424.         <div class="text-center text-xs mt-2">FeatherIcon</div>

  425.       </div>

  426.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  427.         <FigmaIcon class="mx-auto" />

  428.         <div class="text-center text-xs mt-2">FigmaIcon</div>

  429.       </div>

  430.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  431.         <FileMinusIcon class="mx-auto" />

  432.         <div class="text-center text-xs mt-2">FileMinusIcon</div>

  433.       </div>

  434.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  435.         <FilePlusIcon class="mx-auto" />

  436.         <div class="text-center text-xs mt-2">FilePlusIcon</div>

  437.       </div>

  438.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  439.         <FileTextIcon class="mx-auto" />

  440.         <div class="text-center text-xs mt-2">FileTextIcon</div>

  441.       </div>

  442.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  443.         <FileIcon class="mx-auto" />

  444.         <div class="text-center text-xs mt-2">FileIcon</div>

  445.       </div>

  446.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  447.         <FilmIcon class="mx-auto" />

  448.         <div class="text-center text-xs mt-2">FilmIcon</div>

  449.       </div>

  450.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  451.         <FilterIcon class="mx-auto" />

  452.         <div class="text-center text-xs mt-2">FilterIcon</div>

  453.       </div>

  454.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  455.         <FlagIcon class="mx-auto" />

  456.         <div class="text-center text-xs mt-2">FlagIcon</div>

  457.       </div>

  458.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  459.         <FolderMinusIcon class="mx-auto" />

  460.         <div class="text-center text-xs mt-2">FolderMinusIcon</div>

  461.       </div>

  462.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  463.         <FolderPlusIcon class="mx-auto" />

  464.         <div class="text-center text-xs mt-2">FolderPlusIcon</div>

  465.       </div>

  466.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  467.         <FolderIcon class="mx-auto" />

  468.         <div class="text-center text-xs mt-2">FolderIcon</div>

  469.       </div>

  470.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  471.         <FramerIcon class="mx-auto" />

  472.         <div class="text-center text-xs mt-2">FramerIcon</div>

  473.       </div>

  474.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  475.         <FrownIcon class="mx-auto" />

  476.         <div class="text-center text-xs mt-2">FrownIcon</div>

  477.       </div>

  478.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  479.         <GiftIcon class="mx-auto" />

  480.         <div class="text-center text-xs mt-2">GiftIcon</div>

  481.       </div>

  482.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  483.         <GitBranchIcon class="mx-auto" />

  484.         <div class="text-center text-xs mt-2">GitBranchIcon</div>

  485.       </div>

  486.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  487.         <GitCommitIcon class="mx-auto" />

  488.         <div class="text-center text-xs mt-2">GitCommitIcon</div>

  489.       </div>

  490.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  491.         <GitMergeIcon class="mx-auto" />

  492.         <div class="text-center text-xs mt-2">GitMergeIcon</div>

  493.       </div>

  494.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  495.         <GitPullRequestIcon class="mx-auto" />

  496.         <div class="text-center text-xs mt-2">GitPullRequestIcon</div>

  497.       </div>

  498.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  499.         <GithubIcon class="mx-auto" />

  500.         <div class="text-center text-xs mt-2">GithubIcon</div>

  501.       </div>

  502.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  503.         <GitlabIcon class="mx-auto" />

  504.         <div class="text-center text-xs mt-2">GitlabIcon</div>

  505.       </div>

  506.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  507.         <GlobeIcon class="mx-auto" />

  508.         <div class="text-center text-xs mt-2">GlobeIcon</div>

  509.       </div>

  510.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  511.         <GridIcon class="mx-auto" />

  512.         <div class="text-center text-xs mt-2">GridIcon</div>

  513.       </div>

  514.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  515.         <HardDriveIcon class="mx-auto" />

  516.         <div class="text-center text-xs mt-2">HardDriveIcon</div>

  517.       </div>

  518.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  519.         <HashIcon class="mx-auto" />

  520.         <div class="text-center text-xs mt-2">HashIcon</div>

  521.       </div>

  522.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  523.         <HeadphonesIcon class="mx-auto" />

  524.         <div class="text-center text-xs mt-2">HeadphonesIcon</div>

  525.       </div>

  526.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  527.         <HeartIcon class="mx-auto" />

  528.         <div class="text-center text-xs mt-2">HeartIcon</div>

  529.       </div>

  530.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  531.         <HelpCircleIcon class="mx-auto" />

  532.         <div class="text-center text-xs mt-2">HelpCircleIcon</div>

  533.       </div>

  534.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  535.         <HexagonIcon class="mx-auto" />

  536.         <div class="text-center text-xs mt-2">HexagonIcon</div>

  537.       </div>

  538.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  539.         <HomeIcon class="mx-auto" />

  540.         <div class="text-center text-xs mt-2">HomeIcon</div>

  541.       </div>

  542.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  543.         <ImageIcon class="mx-auto" />

  544.         <div class="text-center text-xs mt-2">ImageIcon</div>

  545.       </div>

  546.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  547.         <InboxIcon class="mx-auto" />

  548.         <div class="text-center text-xs mt-2">InboxIcon</div>

  549.       </div>

  550.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  551.         <InfoIcon class="mx-auto" />

  552.         <div class="text-center text-xs mt-2">InfoIcon</div>

  553.       </div>

  554.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  555.         <InstagramIcon class="mx-auto" />

  556.         <div class="text-center text-xs mt-2">InstagramIcon</div>

  557.       </div>

  558.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  559.         <ItalicIcon class="mx-auto" />

  560.         <div class="text-center text-xs mt-2">ItalicIcon</div>

  561.       </div>

  562.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  563.         <KeyIcon class="mx-auto" />

  564.         <div class="text-center text-xs mt-2">KeyIcon</div>

  565.       </div>

  566.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  567.         <LayersIcon class="mx-auto" />

  568.         <div class="text-center text-xs mt-2">LayersIcon</div>

  569.       </div>

  570.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  571.         <LayoutIcon class="mx-auto" />

  572.         <div class="text-center text-xs mt-2">LayoutIcon</div>

  573.       </div>

  574.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  575.         <LifeBuoyIcon class="mx-auto" />

  576.         <div class="text-center text-xs mt-2">LifeBuoyIcon</div>

  577.       </div>

  578.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  579.         <Link2Icon class="mx-auto" />

  580.         <div class="text-center text-xs mt-2">Link2Icon</div>

  581.       </div>

  582.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  583.         <LinkIcon class="mx-auto" />

  584.         <div class="text-center text-xs mt-2">LinkIcon</div>

  585.       </div>

  586.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  587.         <LinkedinIcon class="mx-auto" />

  588.         <div class="text-center text-xs mt-2">LinkedinIcon</div>

  589.       </div>

  590.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  591.         <ListIcon class="mx-auto" />

  592.         <div class="text-center text-xs mt-2">ListIcon</div>

  593.       </div>

  594.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  595.         <LoaderIcon class="mx-auto" />

  596.         <div class="text-center text-xs mt-2">LoaderIcon</div>

  597.       </div>

  598.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  599.         <LockIcon class="mx-auto" />

  600.         <div class="text-center text-xs mt-2">LockIcon</div>

  601.       </div>

  602.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  603.         <LogInIcon class="mx-auto" />

  604.         <div class="text-center text-xs mt-2">LogInIcon</div>

  605.       </div>

  606.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  607.         <LogOutIcon class="mx-auto" />

  608.         <div class="text-center text-xs mt-2">LogOutIcon</div>

  609.       </div>

  610.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  611.         <MailIcon class="mx-auto" />

  612.         <div class="text-center text-xs mt-2">MailIcon</div>

  613.       </div>

  614.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  615.         <MapPinIcon class="mx-auto" />

  616.         <div class="text-center text-xs mt-2">MapPinIcon</div>

  617.       </div>

  618.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  619.         <MapIcon class="mx-auto" />

  620.         <div class="text-center text-xs mt-2">MapIcon</div>

  621.       </div>

  622.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  623.         <Maximize2Icon class="mx-auto" />

  624.         <div class="text-center text-xs mt-2">Maximize2Icon</div>

  625.       </div>

  626.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  627.         <MaximizeIcon class="mx-auto" />

  628.         <div class="text-center text-xs mt-2">MaximizeIcon</div>

  629.       </div>

  630.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  631.         <MehIcon class="mx-auto" />

  632.         <div class="text-center text-xs mt-2">MehIcon</div>

  633.       </div>

  634.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  635.         <MenuIcon class="mx-auto" />

  636.         <div class="text-center text-xs mt-2">MenuIcon</div>

  637.       </div>

  638.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  639.         <MessageCircleIcon class="mx-auto" />

  640.         <div class="text-center text-xs mt-2">MessageCircleIcon</div>

  641.       </div>

  642.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  643.         <MessageSquareIcon class="mx-auto" />

  644.         <div class="text-center text-xs mt-2">MessageSquareIcon</div>

  645.       </div>

  646.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  647.         <MicOffIcon class="mx-auto" />

  648.         <div class="text-center text-xs mt-2">MicOffIcon</div>

  649.       </div>

  650.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  651.         <MicIcon class="mx-auto" />

  652.         <div class="text-center text-xs mt-2">MicIcon</div>

  653.       </div>

  654.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  655.         <Minimize2Icon class="mx-auto" />

  656.         <div class="text-center text-xs mt-2">Minimize2Icon</div>

  657.       </div>

  658.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  659.         <MinimizeIcon class="mx-auto" />

  660.         <div class="text-center text-xs mt-2">MinimizeIcon</div>

  661.       </div>

  662.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  663.         <MinusCircleIcon class="mx-auto" />

  664.         <div class="text-center text-xs mt-2">MinusCircleIcon</div>

  665.       </div>

  666.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  667.         <MinusSquareIcon class="mx-auto" />

  668.         <div class="text-center text-xs mt-2">MinusSquareIcon</div>

  669.       </div>

  670.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  671.         <MinusIcon class="mx-auto" />

  672.         <div class="text-center text-xs mt-2">MinusIcon</div>

  673.       </div>

  674.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  675.         <MonitorIcon class="mx-auto" />

  676.         <div class="text-center text-xs mt-2">MonitorIcon</div>

  677.       </div>

  678.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  679.         <MoonIcon class="mx-auto" />

  680.         <div class="text-center text-xs mt-2">MoonIcon</div>

  681.       </div>

  682.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  683.         <MoreHorizontalIcon class="mx-auto" />

  684.         <div class="text-center text-xs mt-2">MoreHorizontalIcon</div>

  685.       </div>

  686.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  687.         <MoreVerticalIcon class="mx-auto" />

  688.         <div class="text-center text-xs mt-2">MoreVerticalIcon</div>

  689.       </div>

  690.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  691.         <MousePointerIcon class="mx-auto" />

  692.         <div class="text-center text-xs mt-2">MousePointerIcon</div>

  693.       </div>

  694.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  695.         <MoveIcon class="mx-auto" />

  696.         <div class="text-center text-xs mt-2">MoveIcon</div>

  697.       </div>

  698.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  699.         <MusicIcon class="mx-auto" />

  700.         <div class="text-center text-xs mt-2">MusicIcon</div>

  701.       </div>

  702.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  703.         <Navigation2Icon class="mx-auto" />

  704.         <div class="text-center text-xs mt-2">Navigation2Icon</div>

  705.       </div>

  706.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  707.         <NavigationIcon class="mx-auto" />

  708.         <div class="text-center text-xs mt-2">NavigationIcon</div>

  709.       </div>

  710.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  711.         <OctagonIcon class="mx-auto" />

  712.         <div class="text-center text-xs mt-2">OctagonIcon</div>

  713.       </div>

  714.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  715.         <PackageIcon class="mx-auto" />

  716.         <div class="text-center text-xs mt-2">PackageIcon</div>

  717.       </div>

  718.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  719.         <PaperclipIcon class="mx-auto" />

  720.         <div class="text-center text-xs mt-2">PaperclipIcon</div>

  721.       </div>

  722.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  723.         <PauseCircleIcon class="mx-auto" />

  724.         <div class="text-center text-xs mt-2">PauseCircleIcon</div>

  725.       </div>

  726.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  727.         <PauseIcon class="mx-auto" />

  728.         <div class="text-center text-xs mt-2">PauseIcon</div>

  729.       </div>

  730.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  731.         <PenToolIcon class="mx-auto" />

  732.         <div class="text-center text-xs mt-2">PenToolIcon</div>

  733.       </div>

  734.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  735.         <PercentIcon class="mx-auto" />

  736.         <div class="text-center text-xs mt-2">PercentIcon</div>

  737.       </div>

  738.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  739.         <PhoneCallIcon class="mx-auto" />

  740.         <div class="text-center text-xs mt-2">PhoneCallIcon</div>

  741.       </div>

  742.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  743.         <PhoneForwardedIcon class="mx-auto" />

  744.         <div class="text-center text-xs mt-2">PhoneForwardedIcon</div>

  745.       </div>

  746.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  747.         <PhoneIncomingIcon class="mx-auto" />

  748.         <div class="text-center text-xs mt-2">PhoneIncomingIcon</div>

  749.       </div>

  750.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  751.         <PhoneMissedIcon class="mx-auto" />

  752.         <div class="text-center text-xs mt-2">PhoneMissedIcon</div>

  753.       </div>

  754.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  755.         <PhoneOffIcon class="mx-auto" />

  756.         <div class="text-center text-xs mt-2">PhoneOffIcon</div>

  757.       </div>

  758.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  759.         <PhoneOutgoingIcon class="mx-auto" />

  760.         <div class="text-center text-xs mt-2">PhoneOutgoingIcon</div>

  761.       </div>

  762.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  763.         <PhoneIcon class="mx-auto" />

  764.         <div class="text-center text-xs mt-2">PhoneIcon</div>

  765.       </div>

  766.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  767.         <PieChartIcon class="mx-auto" />

  768.         <div class="text-center text-xs mt-2">PieChartIcon</div>

  769.       </div>

  770.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  771.         <PlayCircleIcon class="mx-auto" />

  772.         <div class="text-center text-xs mt-2">PlayCircleIcon</div>

  773.       </div>

  774.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  775.         <PlayIcon class="mx-auto" />

  776.         <div class="text-center text-xs mt-2">PlayIcon</div>

  777.       </div>

  778.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  779.         <PlusCircleIcon class="mx-auto" />

  780.         <div class="text-center text-xs mt-2">PlusCircleIcon</div>

  781.       </div>

  782.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  783.         <PlusSquareIcon class="mx-auto" />

  784.         <div class="text-center text-xs mt-2">PlusSquareIcon</div>

  785.       </div>

  786.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  787.         <PlusIcon class="mx-auto" />

  788.         <div class="text-center text-xs mt-2">PlusIcon</div>

  789.       </div>

  790.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  791.         <PocketIcon class="mx-auto" />

  792.         <div class="text-center text-xs mt-2">PocketIcon</div>

  793.       </div>

  794.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  795.         <PowerIcon class="mx-auto" />

  796.         <div class="text-center text-xs mt-2">PowerIcon</div>

  797.       </div>

  798.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  799.         <PrinterIcon class="mx-auto" />

  800.         <div class="text-center text-xs mt-2">PrinterIcon</div>

  801.       </div>

  802.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  803.         <RadioIcon class="mx-auto" />

  804.         <div class="text-center text-xs mt-2">RadioIcon</div>

  805.       </div>

  806.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  807.         <RefreshCcwIcon class="mx-auto" />

  808.         <div class="text-center text-xs mt-2">RefreshCcwIcon</div>

  809.       </div>

  810.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  811.         <RefreshCwIcon class="mx-auto" />

  812.         <div class="text-center text-xs mt-2">RefreshCwIcon</div>

  813.       </div>

  814.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  815.         <RepeatIcon class="mx-auto" />

  816.         <div class="text-center text-xs mt-2">RepeatIcon</div>

  817.       </div>

  818.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  819.         <RewindIcon class="mx-auto" />

  820.         <div class="text-center text-xs mt-2">RewindIcon</div>

  821.       </div>

  822.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  823.         <RotateCcwIcon class="mx-auto" />

  824.         <div class="text-center text-xs mt-2">RotateCcwIcon</div>

  825.       </div>

  826.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  827.         <RotateCwIcon class="mx-auto" />

  828.         <div class="text-center text-xs mt-2">RotateCwIcon</div>

  829.       </div>

  830.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  831.         <RssIcon class="mx-auto" />

  832.         <div class="text-center text-xs mt-2">RssIcon</div>

  833.       </div>

  834.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  835.         <SaveIcon class="mx-auto" />

  836.         <div class="text-center text-xs mt-2">SaveIcon</div>

  837.       </div>

  838.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  839.         <ScissorsIcon class="mx-auto" />

  840.         <div class="text-center text-xs mt-2">ScissorsIcon</div>

  841.       </div>

  842.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  843.         <SearchIcon class="mx-auto" />

  844.         <div class="text-center text-xs mt-2">SearchIcon</div>

  845.       </div>

  846.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  847.         <SendIcon class="mx-auto" />

  848.         <div class="text-center text-xs mt-2">SendIcon</div>

  849.       </div>

  850.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  851.         <ServerIcon class="mx-auto" />

  852.         <div class="text-center text-xs mt-2">ServerIcon</div>

  853.       </div>

  854.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  855.         <SettingsIcon class="mx-auto" />

  856.         <div class="text-center text-xs mt-2">SettingsIcon</div>

  857.       </div>

  858.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  859.         <Share2Icon class="mx-auto" />

  860.         <div class="text-center text-xs mt-2">Share2Icon</div>

  861.       </div>

  862.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  863.         <ShareIcon class="mx-auto" />

  864.         <div class="text-center text-xs mt-2">ShareIcon</div>

  865.       </div>

  866.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  867.         <ShieldOffIcon class="mx-auto" />

  868.         <div class="text-center text-xs mt-2">ShieldOffIcon</div>

  869.       </div>

  870.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  871.         <ShieldIcon class="mx-auto" />

  872.         <div class="text-center text-xs mt-2">ShieldIcon</div>

  873.       </div>

  874.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  875.         <ShoppingBagIcon class="mx-auto" />

  876.         <div class="text-center text-xs mt-2">ShoppingBagIcon</div>

  877.       </div>

  878.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  879.         <ShoppingCartIcon class="mx-auto" />

  880.         <div class="text-center text-xs mt-2">ShoppingCartIcon</div>

  881.       </div>

  882.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  883.         <ShuffleIcon class="mx-auto" />

  884.         <div class="text-center text-xs mt-2">ShuffleIcon</div>

  885.       </div>

  886.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  887.         <SidebarIcon class="mx-auto" />

  888.         <div class="text-center text-xs mt-2">SidebarIcon</div>

  889.       </div>

  890.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  891.         <SkipBackIcon class="mx-auto" />

  892.         <div class="text-center text-xs mt-2">SkipBackIcon</div>

  893.       </div>

  894.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  895.         <SkipForwardIcon class="mx-auto" />

  896.         <div class="text-center text-xs mt-2">SkipForwardIcon</div>

  897.       </div>

  898.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  899.         <SlackIcon class="mx-auto" />

  900.         <div class="text-center text-xs mt-2">SlackIcon</div>

  901.       </div>

  902.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  903.         <SlashIcon class="mx-auto" />

  904.         <div class="text-center text-xs mt-2">SlashIcon</div>

  905.       </div>

  906.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  907.         <SlidersIcon class="mx-auto" />

  908.         <div class="text-center text-xs mt-2">SlidersIcon</div>

  909.       </div>

  910.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  911.         <SmartphoneIcon class="mx-auto" />

  912.         <div class="text-center text-xs mt-2">SmartphoneIcon</div>

  913.       </div>

  914.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  915.         <SmileIcon class="mx-auto" />

  916.         <div class="text-center text-xs mt-2">SmileIcon</div>

  917.       </div>

  918.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  919.         <SpeakerIcon class="mx-auto" />

  920.         <div class="text-center text-xs mt-2">SpeakerIcon</div>

  921.       </div>

  922.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  923.         <SquareIcon class="mx-auto" />

  924.         <div class="text-center text-xs mt-2">SquareIcon</div>

  925.       </div>

  926.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  927.         <StarIcon class="mx-auto" />

  928.         <div class="text-center text-xs mt-2">StarIcon</div>

  929.       </div>

  930.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  931.         <StopCircleIcon class="mx-auto" />

  932.         <div class="text-center text-xs mt-2">StopCircleIcon</div>

  933.       </div>

  934.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  935.         <SunIcon class="mx-auto" />

  936.         <div class="text-center text-xs mt-2">SunIcon</div>

  937.       </div>

  938.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  939.         <SunriseIcon class="mx-auto" />

  940.         <div class="text-center text-xs mt-2">SunriseIcon</div>

  941.       </div>

  942.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  943.         <SunsetIcon class="mx-auto" />

  944.         <div class="text-center text-xs mt-2">SunsetIcon</div>

  945.       </div>

  946.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  947.         <TabletIcon class="mx-auto" />

  948.         <div class="text-center text-xs mt-2">TabletIcon</div>

  949.       </div>

  950.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  951.         <TagIcon class="mx-auto" />

  952.         <div class="text-center text-xs mt-2">TagIcon</div>

  953.       </div>

  954.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  955.         <TargetIcon class="mx-auto" />

  956.         <div class="text-center text-xs mt-2">TargetIcon</div>

  957.       </div>

  958.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  959.         <TerminalIcon class="mx-auto" />

  960.         <div class="text-center text-xs mt-2">TerminalIcon</div>

  961.       </div>

  962.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  963.         <ThermometerIcon class="mx-auto" />

  964.         <div class="text-center text-xs mt-2">ThermometerIcon</div>

  965.       </div>

  966.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  967.         <ThumbsDownIcon class="mx-auto" />

  968.         <div class="text-center text-xs mt-2">ThumbsDownIcon</div>

  969.       </div>

  970.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  971.         <ThumbsUpIcon class="mx-auto" />

  972.         <div class="text-center text-xs mt-2">ThumbsUpIcon</div>

  973.       </div>

  974.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  975.         <ToggleLeftIcon class="mx-auto" />

  976.         <div class="text-center text-xs mt-2">ToggleLeftIcon</div>

  977.       </div>

  978.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  979.         <ToggleRightIcon class="mx-auto" />

  980.         <div class="text-center text-xs mt-2">ToggleRightIcon</div>

  981.       </div>

  982.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  983.         <ToolIcon class="mx-auto" />

  984.         <div class="text-center text-xs mt-2">ToolIcon</div>

  985.       </div>

  986.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  987.         <Trash2Icon class="mx-auto" />

  988.         <div class="text-center text-xs mt-2">Trash2Icon</div>

  989.       </div>

  990.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  991.         <TrashIcon class="mx-auto" />

  992.         <div class="text-center text-xs mt-2">TrashIcon</div>

  993.       </div>

  994.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  995.         <TrelloIcon class="mx-auto" />

  996.         <div class="text-center text-xs mt-2">TrelloIcon</div>

  997.       </div>

  998.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  999.         <TrendingDownIcon class="mx-auto" />

  1000.         <div class="text-center text-xs mt-2">TrendingDownIcon</div>

  1001.       </div>

  1002.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1003.         <TrendingUpIcon class="mx-auto" />

  1004.         <div class="text-center text-xs mt-2">TrendingUpIcon</div>

  1005.       </div>

  1006.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1007.         <TriangleIcon class="mx-auto" />

  1008.         <div class="text-center text-xs mt-2">TriangleIcon</div>

  1009.       </div>

  1010.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1011.         <TruckIcon class="mx-auto" />

  1012.         <div class="text-center text-xs mt-2">TruckIcon</div>

  1013.       </div>

  1014.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1015.         <TvIcon class="mx-auto" />

  1016.         <div class="text-center text-xs mt-2">TvIcon</div>

  1017.       </div>

  1018.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1019.         <TwitchIcon class="mx-auto" />

  1020.         <div class="text-center text-xs mt-2">TwitchIcon</div>

  1021.       </div>

  1022.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1023.         <TwitterIcon class="mx-auto" />

  1024.         <div class="text-center text-xs mt-2">TwitterIcon</div>

  1025.       </div>

  1026.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1027.         <TypeIcon class="mx-auto" />

  1028.         <div class="text-center text-xs mt-2">TypeIcon</div>

  1029.       </div>

  1030.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1031.         <UmbrellaIcon class="mx-auto" />

  1032.         <div class="text-center text-xs mt-2">UmbrellaIcon</div>

  1033.       </div>

  1034.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1035.         <UnderlineIcon class="mx-auto" />

  1036.         <div class="text-center text-xs mt-2">UnderlineIcon</div>

  1037.       </div>

  1038.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1039.         <UnlockIcon class="mx-auto" />

  1040.         <div class="text-center text-xs mt-2">UnlockIcon</div>

  1041.       </div>

  1042.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1043.         <UploadCloudIcon class="mx-auto" />

  1044.         <div class="text-center text-xs mt-2">UploadCloudIcon</div>

  1045.       </div>

  1046.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1047.         <UploadIcon class="mx-auto" />

  1048.         <div class="text-center text-xs mt-2">UploadIcon</div>

  1049.       </div>

  1050.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1051.         <UserCheckIcon class="mx-auto" />

  1052.         <div class="text-center text-xs mt-2">UserCheckIcon</div>

  1053.       </div>

  1054.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1055.         <UserMinusIcon class="mx-auto" />

  1056.         <div class="text-center text-xs mt-2">UserMinusIcon</div>

  1057.       </div>

  1058.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1059.         <UserPlusIcon class="mx-auto" />

  1060.         <div class="text-center text-xs mt-2">UserPlusIcon</div>

  1061.       </div>

  1062.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1063.         <UserXIcon class="mx-auto" />

  1064.         <div class="text-center text-xs mt-2">UserXIcon</div>

  1065.       </div>

  1066.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1067.         <UserIcon class="mx-auto" />

  1068.         <div class="text-center text-xs mt-2">UserIcon</div>

  1069.       </div>

  1070.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1071.         <UsersIcon class="mx-auto" />

  1072.         <div class="text-center text-xs mt-2">UsersIcon</div>

  1073.       </div>

  1074.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1075.         <VideoOffIcon class="mx-auto" />

  1076.         <div class="text-center text-xs mt-2">VideoOffIcon</div>

  1077.       </div>

  1078.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1079.         <VideoIcon class="mx-auto" />

  1080.         <div class="text-center text-xs mt-2">VideoIcon</div>

  1081.       </div>

  1082.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1083.         <VoicemailIcon class="mx-auto" />

  1084.         <div class="text-center text-xs mt-2">VoicemailIcon</div>

  1085.       </div>

  1086.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1087.         <Volume1Icon class="mx-auto" />

  1088.         <div class="text-center text-xs mt-2">Volume1Icon</div>

  1089.       </div>

  1090.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1091.         <Volume2Icon class="mx-auto" />

  1092.         <div class="text-center text-xs mt-2">Volume2Icon</div>

  1093.       </div>

  1094.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1095.         <VolumeXIcon class="mx-auto" />

  1096.         <div class="text-center text-xs mt-2">VolumeXIcon</div>

  1097.       </div>

  1098.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1099.         <VolumeIcon class="mx-auto" />

  1100.         <div class="text-center text-xs mt-2">VolumeIcon</div>

  1101.       </div>

  1102.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1103.         <WatchIcon class="mx-auto" />

  1104.         <div class="text-center text-xs mt-2">WatchIcon</div>

  1105.       </div>

  1106.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1107.         <WifiOffIcon class="mx-auto" />

  1108.         <div class="text-center text-xs mt-2">WifiOffIcon</div>

  1109.       </div>

  1110.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1111.         <WifiIcon class="mx-auto" />

  1112.         <div class="text-center text-xs mt-2">WifiIcon</div>

  1113.       </div>

  1114.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1115.         <WindIcon class="mx-auto" />

  1116.         <div class="text-center text-xs mt-2">WindIcon</div>

  1117.       </div>

  1118.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1119.         <XCircleIcon class="mx-auto" />

  1120.         <div class="text-center text-xs mt-2">XCircleIcon</div>

  1121.       </div>

  1122.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1123.         <XOctagonIcon class="mx-auto" />

  1124.         <div class="text-center text-xs mt-2">XOctagonIcon</div>

  1125.       </div>

  1126.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1127.         <XSquareIcon class="mx-auto" />

  1128.         <div class="text-center text-xs mt-2">XSquareIcon</div>

  1129.       </div>

  1130.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1131.         <XIcon class="mx-auto" />

  1132.         <div class="text-center text-xs mt-2">XIcon</div>

  1133.       </div>

  1134.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1135.         <YoutubeIcon class="mx-auto" />

  1136.         <div class="text-center text-xs mt-2">YoutubeIcon</div>

  1137.       </div>

  1138.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1139.         <ZapOffIcon class="mx-auto" />

  1140.         <div class="text-center text-xs mt-2">ZapOffIcon</div>

  1141.       </div>

  1142.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1143.         <ZapIcon class="mx-auto" />

  1144.         <div class="text-center text-xs mt-2">ZapIcon</div>

  1145.       </div>

  1146.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1147.         <ZoomInIcon class="mx-auto" />

  1148.         <div class="text-center text-xs mt-2">ZoomInIcon</div>

  1149.       </div>

  1150.       <div class="col-span-6 sm:col-span-4 lg:col-span-3 xl:col-span-2">

  1151.         <ZoomOutIcon class="mx-auto" />

  1152.         <div class="text-center text-xs mt-2">ZoomOutIcon</div>

  1153.       </div>

  1154.     </div>

  1155.     <!-- END: Icon List -->

  1156.   </div>

  1157. </template>