@generation/icons 1.1.7 → 1.1.8

package/packages/demo/src/components/Gallery/Gallery.jsx

@@ -1,6 +1,6 @@
 
-import React from 'react';
-import './styles.css';
+import React, { useState } from 'react';
+import { Code } from '../Code';
 import {
   Account,
   ActiveFill,
@@ -373,2592 +373,442 @@ import {
   Xa
 } from '@generation/icons';
 
-const Gallery = () => (
-  <div className="gallery">
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Account />
-      </div>
-      <span>Account</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ActiveFill />
-      </div>
-      <span>ActiveFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ActiveFillOut />
-      </div>
-      <span>ActiveFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Add />
-      </div>
-      <span>Add</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddAlternativeFill />
-      </div>
-      <span>AddAlternativeFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddCircle />
-      </div>
-      <span>AddCircle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddDocumentFill />
-      </div>
-      <span>AddDocumentFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddDocumentFillOut />
-      </div>
-      <span>AddDocumentFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddEmailFill />
-      </div>
-      <span>AddEmailFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddEmailFillOut />
-      </div>
-      <span>AddEmailFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddFile />
-      </div>
-      <span>AddFile</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddFileFill />
-      </div>
-      <span>AddFileFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AddFileFillOut />
-      </div>
-      <span>AddFileFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AlertCircle />
-      </div>
-      <span>AlertCircle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AlertFill />
-      </div>
-      <span>AlertFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AlertFillOut />
-      </div>
-      <span>AlertFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AlignCenter />
-      </div>
-      <span>AlignCenter</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Amd />
-      </div>
-      <span>Amd</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AngleLeft />
-      </div>
-      <span>AngleLeft</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AngleRight />
-      </div>
-      <span>AngleRight</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AppMenu />
-      </div>
-      <span>AppMenu</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ApplicantStatusFill />
-      </div>
-      <span>ApplicantStatusFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ApplicantStatusFillOut />
-      </div>
-      <span>ApplicantStatusFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ApplicantsFill />
-      </div>
-      <span>ApplicantsFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ApplicantsFillOut />
-      </div>
-      <span>ApplicantsFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Approved />
-      </div>
-      <span>Approved</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArchiveFill />
-      </div>
-      <span>ArchiveFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArchiveFillOut />
-      </div>
-      <span>ArchiveFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArchiveRoundFill />
-      </div>
-      <span>ArchiveRoundFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArchiveRoundFillOut />
-      </div>
-      <span>ArchiveRoundFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArrowDown />
-      </div>
-      <span>ArrowDown</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArrowLeft />
-      </div>
-      <span>ArrowLeft</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArrowRight />
-      </div>
-      <span>ArrowRight</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArrowUp />
-      </div>
-      <span>ArrowUp</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ArrowUpward />
-      </div>
-      <span>ArrowUpward</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Assigment />
-      </div>
-      <span>Assigment</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AssignCohortsFill />
-      </div>
-      <span>AssignCohortsFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AssignCohortsFillOut />
-      </div>
-      <span>AssignCohortsFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AssignMobilizerFill />
-      </div>
-      <span>AssignMobilizerFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AssignMobilizerFillOut />
-      </div>
-      <span>AssignMobilizerFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AssingMobilizer />
-      </div>
-      <span>AssingMobilizer</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AttendanceFill />
-      </div>
-      <span>AttendanceFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <AttendanceFillOut />
-      </div>
-      <span>AttendanceFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Aui />
-      </div>
-      <span>Aui</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BackToDraft />
-      </div>
-      <span>BackToDraft</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BarchartFill />
-      </div>
-      <span>BarchartFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BarchartFillOut />
-      </div>
-      <span>BarchartFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Bars />
-      </div>
-      <span>Bars</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Bars3 />
-      </div>
-      <span>Bars3</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Bell />
-      </div>
-      <span>Bell</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BellFill />
-      </div>
-      <span>BellFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BellFillOut />
-      </div>
-      <span>BellFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Biretta />
-      </div>
-      <span>Biretta</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BlockFillOut />
-      </div>
-      <span>BlockFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Bold />
-      </div>
-      <span>Bold</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BookmarkFill />
-      </div>
-      <span>BookmarkFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BookmarkFillOut />
-      </div>
-      <span>BookmarkFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Bookmarks />
-      </div>
-      <span>Bookmarks</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Briefcase />
-      </div>
-      <span>Briefcase</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BriefcaseOutline />
-      </div>
-      <span>BriefcaseOutline</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <BulletedList />
-      </div>
-      <span>BulletedList</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Calendar />
-      </div>
-      <span>Calendar</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Calendar2 />
-      </div>
-      <span>Calendar2</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Calendar3 />
-      </div>
-      <span>Calendar3</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Camera />
-      </div>
-      <span>Camera</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CaretDown />
-      </div>
-      <span>CaretDown</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CaretDownCircle />
-      </div>
-      <span>CaretDownCircle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CaretUp />
-      </div>
-      <span>CaretUp</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Chain />
-      </div>
-      <span>Chain</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ChartSquareFill />
-      </div>
-      <span>ChartSquareFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ChartSquareFillOut />
-      </div>
-      <span>ChartSquareFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ChatFill />
-      </div>
-      <span>ChatFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ChatFillOut />
-      </div>
-      <span>ChatFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Check />
-      </div>
-      <span>Check</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CheckCircleFillOut />
-      </div>
-      <span>CheckCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CheckFill />
-      </div>
-      <span>CheckFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CheckMark />
-      </div>
-      <span>CheckMark</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ChevronDown />
-      </div>
-      <span>ChevronDown</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ChevronLeft />
-      </div>
-      <span>ChevronLeft</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ChevronRight />
-      </div>
-      <span>ChevronRight</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ChevronUp />
-      </div>
-      <span>ChevronUp</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Circle />
-      </div>
-      <span>Circle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Clock />
-      </div>
-      <span>Clock</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ClockDraft />
-      </div>
-      <span>ClockDraft</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ClockFill />
-      </div>
-      <span>ClockFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ClockFillOut />
-      </div>
-      <span>ClockFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CloneFill />
-      </div>
-      <span>CloneFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CloneFillOut />
-      </div>
-      <span>CloneFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Close />
-      </div>
-      <span>Close</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CloseButton />
-      </div>
-      <span>CloseButton</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Cloud />
-      </div>
-      <span>Cloud</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CommentSharpedo />
-      </div>
-      <span>CommentSharpedo</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CompleteCheck />
-      </div>
-      <span>CompleteCheck</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ConcernFill />
-      </div>
-      <span>ConcernFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ConcernFillOut />
-      </div>
-      <span>ConcernFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ConfigFill />
-      </div>
-      <span>ConfigFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ConfigFillOut />
-      </div>
-      <span>ConfigFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Contact />
-      </div>
-      <span>Contact</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CopyFill />
-      </div>
-      <span>CopyFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CopyFillOut />
-      </div>
-      <span>CopyFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CorrectFill />
-      </div>
-      <span>CorrectFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <CorrectFillOut />
-      </div>
-      <span>CorrectFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DashboardFill />
-      </div>
-      <span>DashboardFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DashboardFillOut />
-      </div>
-      <span>DashboardFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DefaultAvatar />
-      </div>
-      <span>DefaultAvatar</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DeleteFill />
-      </div>
-      <span>DeleteFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DeleteFillOut />
-      </div>
-      <span>DeleteFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DeleteRoundFill />
-      </div>
-      <span>DeleteRoundFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DeleteRoundFillOut />
-      </div>
-      <span>DeleteRoundFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DotLines />
-      </div>
-      <span>DotLines</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DoubleLeftArrow />
-      </div>
-      <span>DoubleLeftArrow</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DoubleRightArrow />
-      </div>
-      <span>DoubleRightArrow</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownArrow />
-      </div>
-      <span>DownArrow</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownCaret />
-      </div>
-      <span>DownCaret</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownIndicator />
-      </div>
-      <span>DownIndicator</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Download />
-      </div>
-      <span>Download</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownloadCircle />
-      </div>
-      <span>DownloadCircle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownloadFlat />
-      </div>
-      <span>DownloadFlat</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownloadInCircleFill />
-      </div>
-      <span>DownloadInCircleFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownloadInCircleFillOut />
-      </div>
-      <span>DownloadInCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownloadSquareFill />
-      </div>
-      <span>DownloadSquareFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DownloadSquareFillOut />
-      </div>
-      <span>DownloadSquareFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Downtrend />
-      </div>
-      <span>Downtrend</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Draft />
-      </div>
-      <span>Draft</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Drag />
-      </div>
-      <span>Drag</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Dropdown />
-      </div>
-      <span>Dropdown</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <DropdownArrow />
-      </div>
-      <span>DropdownArrow</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Edit />
-      </div>
-      <span>Edit</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EditCalendar />
-      </div>
-      <span>EditCalendar</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EditFill />
-      </div>
-      <span>EditFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EditFillOut />
-      </div>
-      <span>EditFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EducationFill />
-      </div>
-      <span>EducationFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EducationFillOut />
-      </div>
-      <span>EducationFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Ellipsis />
-      </div>
-      <span>Ellipsis</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EllipsisH />
-      </div>
-      <span>EllipsisH</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EllipsisV />
-      </div>
-      <span>EllipsisV</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EllipsisVDouble />
-      </div>
-      <span>EllipsisVDouble</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EmailFill />
-      </div>
-      <span>EmailFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EmailFillOut />
-      </div>
-      <span>EmailFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EmailRoundFillOut />
-      </div>
-      <span>EmailRoundFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EmotionGood />
-      </div>
-      <span>EmotionGood</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EmotionNotGood />
-      </div>
-      <span>EmotionNotGood</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EmotionOk />
-      </div>
-      <span>EmotionOk</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EnvelopeFill />
-      </div>
-      <span>EnvelopeFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EnvelopeFillOut />
-      </div>
-      <span>EnvelopeFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Error />
-      </div>
-      <span>Error</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ExclamationCircleFill />
-      </div>
-      <span>ExclamationCircleFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ExclamationCircleFillOut />
-      </div>
-      <span>ExclamationCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Export />
-      </div>
-      <span>Export</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ExternalLink />
-      </div>
-      <span>ExternalLink</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Eye />
-      </div>
-      <span>Eye</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EyeOpen />
-      </div>
-      <span>EyeOpen</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <EyeSlash />
-      </div>
-      <span>EyeSlash</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Facebook />
-      </div>
-      <span>Facebook</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FeelingGreat />
-      </div>
-      <span>FeelingGreat</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FeelingOk />
-      </div>
-      <span>FeelingOk</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <File />
-      </div>
-      <span>File</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FileCopy />
-      </div>
-      <span>FileCopy</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FileDownload />
-      </div>
-      <span>FileDownload</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FilePdf />
-      </div>
-      <span>FilePdf</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FilePlusFill />
-      </div>
-      <span>FilePlusFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FilePlusFillOut />
-      </div>
-      <span>FilePlusFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Filter />
-      </div>
-      <span>Filter</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FlagFill />
-      </div>
-      <span>FlagFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FlagFillOut />
-      </div>
-      <span>FlagFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FlagTwoFill />
-      </div>
-      <span>FlagTwoFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FlagTwoFillOut />
-      </div>
-      <span>FlagTwoFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Flagged />
-      </div>
-      <span>Flagged</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FolderDescriptionFill />
-      </div>
-      <span>FolderDescriptionFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FolderShared />
-      </div>
-      <span>FolderShared</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <FolderUser />
-      </div>
-      <span>FolderUser</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Forward />
-      </div>
-      <span>Forward</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <GraduationCapFill />
-      </div>
-      <span>GraduationCapFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <GraduationCapFillOut />
-      </div>
-      <span>GraduationCapFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <GroupFill />
-      </div>
-      <span>GroupFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <GroupFillOut />
-      </div>
-      <span>GroupFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <HandPointerFill />
-      </div>
-      <span>HandPointerFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <HandPointerFillOut />
-      </div>
-      <span>HandPointerFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Happy />
-      </div>
-      <span>Happy</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Heart />
-      </div>
-      <span>Heart</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <High />
-      </div>
-      <span>High</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Home />
-      </div>
-      <span>Home</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ImageLoading />
-      </div>
-      <span>ImageLoading</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InProgressFill />
-      </div>
-      <span>InProgressFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InProgressFillOut />
-      </div>
-      <span>InProgressFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InactiveFill />
-      </div>
-      <span>InactiveFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InactiveFillOut />
-      </div>
-      <span>InactiveFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Info />
-      </div>
-      <span>Info</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InfoButtons />
-      </div>
-      <span>InfoButtons</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InfoCircleFill />
-      </div>
-      <span>InfoCircleFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InfoCircleFillOut />
-      </div>
-      <span>InfoCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InfoFill />
-      </div>
-      <span>InfoFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InfoFillOut />
-      </div>
-      <span>InfoFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Information />
-      </div>
-      <span>Information</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InquiryFill />
-      </div>
-      <span>InquiryFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <InquiryFillOut />
-      </div>
-      <span>InquiryFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Instagram />
-      </div>
-      <span>Instagram</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Italic />
-      </div>
-      <span>Italic</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <JobFill />
-      </div>
-      <span>JobFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <JobFillOut />
-      </div>
-      <span>JobFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LeftArrow />
-      </div>
-      <span>LeftArrow</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LeftCaret />
-      </div>
-      <span>LeftCaret</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LinkIcon />
-      </div>
-      <span>LinkIcon</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Linkedin />
-      </div>
-      <span>Linkedin</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <List />
-      </div>
-      <span>List</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ListOl />
-      </div>
-      <span>ListOl</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Loading />
-      </div>
-      <span>Loading</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LocationF />
-      </div>
-      <span>LocationF</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LocationFill />
-      </div>
-      <span>LocationFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LocationFillOut />
-      </div>
-      <span>LocationFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LockFill />
-      </div>
-      <span>LockFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LockFillOut />
-      </div>
-      <span>LockFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LockOpenFill />
-      </div>
-      <span>LockOpenFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LockOpenFillOut />
-      </div>
-      <span>LockOpenFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LockRoundFill />
-      </div>
-      <span>LockRoundFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LockRoundFillOut />
-      </div>
-      <span>LockRoundFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LogOut />
-      </div>
-      <span>LogOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LogoGeneration />
-      </div>
-      <span>LogoGeneration</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <LogoGoogle />
-      </div>
-      <span>LogoGoogle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Low />
-      </div>
-      <span>Low</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <MagicWand />
-      </div>
-      <span>MagicWand</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <MailFill />
-      </div>
-      <span>MailFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <MailFillOut />
-      </div>
-      <span>MailFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Map />
-      </div>
-      <span>Map</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Medium />
-      </div>
-      <span>Medium</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Menu />
-      </div>
-      <span>Menu</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <MessageLeftFill />
-      </div>
-      <span>MessageLeftFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <MessageLeftFillOut />
-      </div>
-      <span>MessageLeftFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Minus />
-      </div>
-      <span>Minus</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <MoreHorizontal />
-      </div>
-      <span>MoreHorizontal</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <MoreVertical />
-      </div>
-      <span>MoreVertical</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Neutral />
-      </div>
-      <span>Neutral</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <NewTab />
-      </div>
-      <span>NewTab</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <NotAvailable />
-      </div>
-      <span>NotAvailable</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <NotFeelingGood />
-      </div>
-      <span>NotFeelingGood</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <NotesFill />
-      </div>
-      <span>NotesFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <NotesFillOut />
-      </div>
-      <span>NotesFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Notification />
-      </div>
-      <span>Notification</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <NotifyFillOut />
-      </div>
-      <span>NotifyFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <OpenBook />
-      </div>
-      <span>OpenBook</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <OrderDesc />
-      </div>
-      <span>OrderDesc</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <OrderedList />
-      </div>
-      <span>OrderedList</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Padlock />
-      </div>
-      <span>Padlock</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PadlockOpen />
-      </div>
-      <span>PadlockOpen</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Pause />
-      </div>
-      <span>Pause</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PauseCircleFillOut />
-      </div>
-      <span>PauseCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PauseFill />
-      </div>
-      <span>PauseFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PauseInCircleFill />
-      </div>
-      <span>PauseInCircleFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PauseInCircleFillOut />
-      </div>
-      <span>PauseInCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PdfFill />
-      </div>
-      <span>PdfFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PdfFillOut />
-      </div>
-      <span>PdfFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PencilFill />
-      </div>
-      <span>PencilFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PencilFillOut />
-      </div>
-      <span>PencilFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PendingApproval />
-      </div>
-      <span>PendingApproval</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PhoneFill />
-      </div>
-      <span>PhoneFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PhoneFillOut />
-      </div>
-      <span>PhoneFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PhoneRoundFill />
-      </div>
-      <span>PhoneRoundFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PhoneRoundFillOut />
-      </div>
-      <span>PhoneRoundFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Photo />
-      </div>
-      <span>Photo</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PhotoOutline />
-      </div>
-      <span>PhotoOutline</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PinFill />
-      </div>
-      <span>PinFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PinFillOut />
-      </div>
-      <span>PinFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Placeholder />
-      </div>
-      <span>Placeholder</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Plane />
-      </div>
-      <span>Plane</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PlaneSlash />
-      </div>
-      <span>PlaneSlash</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PlayCircle />
-      </div>
-      <span>PlayCircle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PlayFill />
-      </div>
-      <span>PlayFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PlayFillOut />
-      </div>
-      <span>PlayFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Plus />
-      </div>
-      <span>Plus</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PlusAlt />
-      </div>
-      <span>PlusAlt</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PlusCircleFill />
-      </div>
-      <span>PlusCircleFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <PlusCircleFillOut />
-      </div>
-      <span>PlusCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Previous />
-      </div>
-      <span>Previous</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ProfileFill />
-      </div>
-      <span>ProfileFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ProfileFillOut />
-      </div>
-      <span>ProfileFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Published />
-      </div>
-      <span>Published</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Rectangle />
-      </div>
-      <span>Rectangle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Rejected />
-      </div>
-      <span>Rejected</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <RelocateOff />
-      </div>
-      <span>RelocateOff</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <RelocateOn />
-      </div>
-      <span>RelocateOn</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ReportsFill />
-      </div>
-      <span>ReportsFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ReportsFillOut />
-      </div>
-      <span>ReportsFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Reschedule />
-      </div>
-      <span>Reschedule</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <RightArrow />
-      </div>
-      <span>RightArrow</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <RightCaret />
-      </div>
-      <span>RightCaret</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SalesforceFill />
-      </div>
-      <span>SalesforceFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SalesforceFillOut />
-      </div>
-      <span>SalesforceFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <School />
-      </div>
-      <span>School</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Search />
-      </div>
-      <span>Search</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SectionsFill />
-      </div>
-      <span>SectionsFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SectionsFillOut />
-      </div>
-      <span>SectionsFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SendFill />
-      </div>
-      <span>SendFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SendFillOut />
-      </div>
-      <span>SendFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SendToCohort />
-      </div>
-      <span>SendToCohort</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Setting />
-      </div>
-      <span>Setting</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Settings />
-      </div>
-      <span>Settings</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SettingsEmpFill />
-      </div>
-      <span>SettingsEmpFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SettingsEmpFillOut />
-      </div>
-      <span>SettingsEmpFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ShareAlt />
-      </div>
-      <span>ShareAlt</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ShareFill />
-      </div>
-      <span>ShareFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ShareFillOut />
-      </div>
-      <span>ShareFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ShareSquareFillOut />
-      </div>
-      <span>ShareSquareFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Short />
-      </div>
-      <span>Short</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <ShortCenter />
-      </div>
-      <span>ShortCenter</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Sigma />
-      </div>
-      <span>Sigma</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SignOut />
-      </div>
-      <span>SignOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Squares />
-      </div>
-      <span>Squares</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StaffFill />
-      </div>
-      <span>StaffFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StaffFillOut />
-      </div>
-      <span>StaffFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Star />
-      </div>
-      <span>Star</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StarFill />
-      </div>
-      <span>StarFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StarFillOut />
-      </div>
-      <span>StarFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StarRoundFill />
-      </div>
-      <span>StarRoundFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StarRoundFillOut />
-      </div>
-      <span>StarRoundFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Status />
-      </div>
-      <span>Status</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StopCircleFillOut />
-      </div>
-      <span>StopCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StopFill />
-      </div>
-      <span>StopFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StopFillOut />
-      </div>
-      <span>StopFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <StopRoundFillOut />
-      </div>
-      <span>StopRoundFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Success />
-      </div>
-      <span>Success</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Sunset />
-      </div>
-      <span>Sunset</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <SupervisorAccount />
-      </div>
-      <span>SupervisorAccount</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Teams />
-      </div>
-      <span>Teams</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TimeFill />
-      </div>
-      <span>TimeFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TimeFillOut />
-      </div>
-      <span>TimeFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TimelineFill />
-      </div>
-      <span>TimelineFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TimelineFillOut />
-      </div>
-      <span>TimelineFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TimerFill />
-      </div>
-      <span>TimerFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TimerFillOut />
-      </div>
-      <span>TimerFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Times />
-      </div>
-      <span>Times</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TimesCircleFill />
-      </div>
-      <span>TimesCircleFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TimesCircleFillOut />
-      </div>
-      <span>TimesCircleFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Translate />
-      </div>
-      <span>Translate</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TrashFillOut />
-      </div>
-      <span>TrashFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TurnOnFill />
-      </div>
-      <span>TurnOnFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <TurnOnFillOut />
-      </div>
-      <span>TurnOnFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Twitter />
-      </div>
-      <span>Twitter</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UnarchiveFill />
-      </div>
-      <span>UnarchiveFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UnarchiveFillOut />
-      </div>
-      <span>UnarchiveFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Underline />
-      </div>
-      <span>Underline</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Unlock />
-      </div>
-      <span>Unlock</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Unpause />
-      </div>
-      <span>Unpause</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UpArrow />
-      </div>
-      <span>UpArrow</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UpCaret />
-      </div>
-      <span>UpCaret</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UpIndicator />
-      </div>
-      <span>UpIndicator</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UpTrend />
-      </div>
-      <span>UpTrend</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UpdateApplicants />
-      </div>
-      <span>UpdateApplicants</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UpdateStage />
-      </div>
-      <span>UpdateStage</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UploadCloud />
-      </div>
-      <span>UploadCloud</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UploadFill />
-      </div>
-      <span>UploadFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UploadFillOut />
-      </div>
-      <span>UploadFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UploadSquare />
-      </div>
-      <span>UploadSquare</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <User />
-      </div>
-      <span>User</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <UserCircle />
-      </div>
-      <span>UserCircle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Users />
-      </div>
-      <span>Users</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Verified />
-      </div>
-      <span>Verified</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <VideoFill />
-      </div>
-      <span>VideoFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <VideoFillOut />
-      </div>
-      <span>VideoFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Vimeo />
-      </div>
-      <span>Vimeo</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Visibility />
-      </div>
-      <span>Visibility</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <VisibilityOff />
-      </div>
-      <span>VisibilityOff</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <VisibleOffFill />
-      </div>
-      <span>VisibleOffFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <VisibleOffFillOut />
-      </div>
-      <span>VisibleOffFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <VisibleOnFill />
-      </div>
-      <span>VisibleOnFill</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <VisibleOnFillOut />
-      </div>
-      <span>VisibleOnFillOut</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Waffle />
-      </div>
-      <span>Waffle</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Warning />
-      </div>
-      <span>Warning</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Work />
-      </div>
-      <span>Work</span>
-    </div>
-    
-    <div className="gallery-item">
-      <div className="gallery-svg">
-        <Xa />
-      </div>
-      <span>Xa</span>
-    </div>
-  </div>
-);
+const icons = {
+  Account,
+  ActiveFill,
+  ActiveFillOut,
+  Add,
+  AddAlternativeFill,
+  AddCircle,
+  AddDocumentFill,
+  AddDocumentFillOut,
+  AddEmailFill,
+  AddEmailFillOut,
+  AddFile,
+  AddFileFill,
+  AddFileFillOut,
+  AlertCircle,
+  AlertFill,
+  AlertFillOut,
+  AlignCenter,
+  Amd,
+  AngleLeft,
+  AngleRight,
+  AppMenu,
+  ApplicantStatusFill,
+  ApplicantStatusFillOut,
+  ApplicantsFill,
+  ApplicantsFillOut,
+  Approved,
+  ArchiveFill,
+  ArchiveFillOut,
+  ArchiveRoundFill,
+  ArchiveRoundFillOut,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpward,
+  Assigment,
+  AssignCohortsFill,
+  AssignCohortsFillOut,
+  AssignMobilizerFill,
+  AssignMobilizerFillOut,
+  AssingMobilizer,
+  AttendanceFill,
+  AttendanceFillOut,
+  Aui,
+  BackToDraft,
+  BarchartFill,
+  BarchartFillOut,
+  Bars,
+  Bars3,
+  Bell,
+  BellFill,
+  BellFillOut,
+  Biretta,
+  BlockFillOut,
+  Bold,
+  BookmarkFill,
+  BookmarkFillOut,
+  Bookmarks,
+  Briefcase,
+  BriefcaseOutline,
+  BulletedList,
+  Calendar,
+  Calendar2,
+  Calendar3,
+  Camera,
+  CaretDown,
+  CaretDownCircle,
+  CaretUp,
+  Chain,
+  ChartSquareFill,
+  ChartSquareFillOut,
+  ChatFill,
+  ChatFillOut,
+  Check,
+  CheckCircleFillOut,
+  CheckFill,
+  CheckMark,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle,
+  Clock,
+  ClockDraft,
+  ClockFill,
+  ClockFillOut,
+  CloneFill,
+  CloneFillOut,
+  Close,
+  CloseButton,
+  Cloud,
+  CommentSharpedo,
+  CompleteCheck,
+  ConcernFill,
+  ConcernFillOut,
+  ConfigFill,
+  ConfigFillOut,
+  Contact,
+  CopyFill,
+  CopyFillOut,
+  CorrectFill,
+  CorrectFillOut,
+  DashboardFill,
+  DashboardFillOut,
+  DefaultAvatar,
+  DeleteFill,
+  DeleteFillOut,
+  DeleteRoundFill,
+  DeleteRoundFillOut,
+  DotLines,
+  DoubleLeftArrow,
+  DoubleRightArrow,
+  DownArrow,
+  DownCaret,
+  DownIndicator,
+  Download,
+  DownloadCircle,
+  DownloadFlat,
+  DownloadInCircleFill,
+  DownloadInCircleFillOut,
+  DownloadSquareFill,
+  DownloadSquareFillOut,
+  Downtrend,
+  Draft,
+  Drag,
+  Dropdown,
+  DropdownArrow,
+  Edit,
+  EditCalendar,
+  EditFill,
+  EditFillOut,
+  EducationFill,
+  EducationFillOut,
+  Ellipsis,
+  EllipsisH,
+  EllipsisV,
+  EllipsisVDouble,
+  EmailFill,
+  EmailFillOut,
+  EmailRoundFillOut,
+  EmotionGood,
+  EmotionNotGood,
+  EmotionOk,
+  EnvelopeFill,
+  EnvelopeFillOut,
+  Error,
+  ExclamationCircleFill,
+  ExclamationCircleFillOut,
+  Export,
+  ExternalLink,
+  Eye,
+  EyeOpen,
+  EyeSlash,
+  Facebook,
+  FeelingGreat,
+  FeelingOk,
+  File,
+  FileCopy,
+  FileDownload,
+  FilePdf,
+  FilePlusFill,
+  FilePlusFillOut,
+  Filter,
+  FlagFill,
+  FlagFillOut,
+  FlagTwoFill,
+  FlagTwoFillOut,
+  Flagged,
+  FolderDescriptionFill,
+  FolderShared,
+  FolderUser,
+  Forward,
+  GraduationCapFill,
+  GraduationCapFillOut,
+  GroupFill,
+  GroupFillOut,
+  HandPointerFill,
+  HandPointerFillOut,
+  Happy,
+  Heart,
+  High,
+  Home,
+  ImageLoading,
+  InProgressFill,
+  InProgressFillOut,
+  InactiveFill,
+  InactiveFillOut,
+  Info,
+  InfoButtons,
+  InfoCircleFill,
+  InfoCircleFillOut,
+  InfoFill,
+  InfoFillOut,
+  Information,
+  InquiryFill,
+  InquiryFillOut,
+  Instagram,
+  Italic,
+  JobFill,
+  JobFillOut,
+  LeftArrow,
+  LeftCaret,
+  LinkIcon,
+  Linkedin,
+  List,
+  ListOl,
+  Loading,
+  LocationF,
+  LocationFill,
+  LocationFillOut,
+  LockFill,
+  LockFillOut,
+  LockOpenFill,
+  LockOpenFillOut,
+  LockRoundFill,
+  LockRoundFillOut,
+  LogOut,
+  LogoGeneration,
+  LogoGoogle,
+  Low,
+  MagicWand,
+  MailFill,
+  MailFillOut,
+  Map,
+  Medium,
+  Menu,
+  MessageLeftFill,
+  MessageLeftFillOut,
+  Minus,
+  MoreHorizontal,
+  MoreVertical,
+  Neutral,
+  NewTab,
+  NotAvailable,
+  NotFeelingGood,
+  NotesFill,
+  NotesFillOut,
+  Notification,
+  NotifyFillOut,
+  OpenBook,
+  OrderDesc,
+  OrderedList,
+  Padlock,
+  PadlockOpen,
+  Pause,
+  PauseCircleFillOut,
+  PauseFill,
+  PauseInCircleFill,
+  PauseInCircleFillOut,
+  PdfFill,
+  PdfFillOut,
+  PencilFill,
+  PencilFillOut,
+  PendingApproval,
+  PhoneFill,
+  PhoneFillOut,
+  PhoneRoundFill,
+  PhoneRoundFillOut,
+  Photo,
+  PhotoOutline,
+  PinFill,
+  PinFillOut,
+  Placeholder,
+  Plane,
+  PlaneSlash,
+  PlayCircle,
+  PlayFill,
+  PlayFillOut,
+  Plus,
+  PlusAlt,
+  PlusCircleFill,
+  PlusCircleFillOut,
+  Previous,
+  ProfileFill,
+  ProfileFillOut,
+  Published,
+  Rectangle,
+  Rejected,
+  RelocateOff,
+  RelocateOn,
+  ReportsFill,
+  ReportsFillOut,
+  Reschedule,
+  RightArrow,
+  RightCaret,
+  SalesforceFill,
+  SalesforceFillOut,
+  School,
+  Search,
+  SectionsFill,
+  SectionsFillOut,
+  SendFill,
+  SendFillOut,
+  SendToCohort,
+  Setting,
+  Settings,
+  SettingsEmpFill,
+  SettingsEmpFillOut,
+  ShareAlt,
+  ShareFill,
+  ShareFillOut,
+  ShareSquareFillOut,
+  Short,
+  ShortCenter,
+  Sigma,
+  SignOut,
+  Squares,
+  StaffFill,
+  StaffFillOut,
+  Star,
+  StarFill,
+  StarFillOut,
+  StarRoundFill,
+  StarRoundFillOut,
+  Status,
+  StopCircleFillOut,
+  StopFill,
+  StopFillOut,
+  StopRoundFillOut,
+  Success,
+  Sunset,
+  SupervisorAccount,
+  Teams,
+  TimeFill,
+  TimeFillOut,
+  TimelineFill,
+  TimelineFillOut,
+  TimerFill,
+  TimerFillOut,
+  Times,
+  TimesCircleFill,
+  TimesCircleFillOut,
+  Translate,
+  TrashFillOut,
+  TurnOnFill,
+  TurnOnFillOut,
+  Twitter,
+  UnarchiveFill,
+  UnarchiveFillOut,
+  Underline,
+  Unlock,
+  Unpause,
+  UpArrow,
+  UpCaret,
+  UpIndicator,
+  UpTrend,
+  UpdateApplicants,
+  UpdateStage,
+  UploadCloud,
+  UploadFill,
+  UploadFillOut,
+  UploadSquare,
+  User,
+  UserCircle,
+  Users,
+  Verified,
+  VideoFill,
+  VideoFillOut,
+  Vimeo,
+  Visibility,
+  VisibilityOff,
+  VisibleOffFill,
+  VisibleOffFillOut,
+  VisibleOnFill,
+  VisibleOnFillOut,
+  Waffle,
+  Warning,
+  Work,
+  Xa
+};
+
+const Gallery = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Filtrar iconos según el término de búsqueda
+  const filteredIcons = Object.entries(icons).filter(([name]) =>
+    name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Estilos dinámicos según el modo (oscuro o claro)
+  const containerClass = isDarkMode ? 'bg-black text-white' : 'bg-white text-black';
+
+  return (
+    <div className={`p-8 min-h-screen transition-colors duration-300 ${containerClass}`}>
+    <div className="text-blue-01 text-title-lg-bold py-2 text-center">Generation Icons</div>
+      <div>
+        <Code />
+      </div>
+      <div className="flex justify-between items-center mb-6">
+        <input
+          type="text"
+          className="w-full max-w-md p-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-charcoal"
+          placeholder="Search icons..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <button
+          className={`relative inline-flex items-center cursor-pointer`}
+          onClick={() => setIsDarkMode((prev) => !prev)}
+        >
+          <span className="sr-only">Modo Oscuro</span>
+          <span
+            className={`block w-14 h-8 rounded-full ${isDarkMode ? 'bg-green-500' : 'bg-blue-500'}`}
+          ></span>
+          <span
+            className={`absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-transform duration-300 ease-in-out transform ${isDarkMode ? 'translate-x-6' : 'translate-x-0'}`}
+          ></span>
+        </button>
+      </div>
+      <div
+        className="grid gap-4 text-center"
+        style={{
+          gridTemplateColumns: 'repeat(auto-fill, minmax(90px, 1fr))',
+          gridAutoRows: 'auto',
+        }}
+      >
+        {filteredIcons.length > 0 ? (
+          filteredIcons.map(([name, IconComponent]) => (
+            <div
+              key={name}
+              className="flex flex-col items-center justify-center gap-1 text-center"
+            >
+              <div className={`min-h-[64px] flex items-center justify-center border-2 border-transparent rounded shadow-md w-full text-[32px] ${isDarkMode ? 'bg-gray-900' : 'bg-white'}`}>
+                <IconComponent />
+              </div>
+              <span className="text-[10px]">{name}</span>
+            </div>
+          ))
+        ) : (
+          <p className="col-span-full text-gray-500">No se encontraron iconos</p>
+        )}
+      </div>
+    </div>
+  );
+};
 
 export default Gallery;