@generation/icons 1.0.0

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

@@ -0,0 +1,1709 @@
+import React from 'react';
+import './styles.css';
+import {
+  Account,
+  ActiveFill,
+  ActiveFillOut,
+  Add,
+  AddCircle,
+  AddFile,
+  AddFileFill,
+  AddFileFillOut,
+  AlertCircle,
+  AlertFill,
+  AlertFillOut,
+  AlignCenter,
+  Amd,
+  AngleLeft,
+  AngleRight,
+  ApplicantStatus,
+  Approved,
+  ArchiveFill,
+  ArchiveFillOut,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpward,
+  Assigment,
+  AssingMobilizer,
+  Aui,
+  Bars,
+  Bars3,
+  Bell,
+  BellFill,
+  BellFillOut,
+  Biretta,
+  BlockFillOut,
+  Bold,
+  Bookmark,
+  Bookmarks,
+  Briefcase,
+  Calendar,
+  Calendar2,
+  Calendar3,
+  Camera,
+  CaretDown,
+  CaretDownCircle,
+  CaretUp,
+  Chain,
+  ChartSquareFill,
+  ChartSquareFillOut,
+  ChatFilled,
+  Check,
+  CheckCircleFillOut,
+  CheckFill,
+  CheckMark,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle,
+  Clock,
+  ClockDraft,
+  ClockFill,
+  ClockFillOut,
+  CloneFill,
+  CloneFillOut,
+  Close,
+  Cloud,
+  CommentSharpedo,
+  ConfigFill,
+  ConfigFillOut,
+  Contact,
+  CorrectFill,
+  CorrectFillOut,
+  Dashboard,
+  DefaultAvatar,
+  DeleteFill,
+  DeleteFillOut,
+  DotLines,
+  DoubleLeftArrow,
+  DoubleRightArrow,
+  DownArrow,
+  DownIndicator,
+  Download,
+  DownloadCircle,
+  DownloadFlat,
+  DownloadSquareFill,
+  DownloadSquareFillOut,
+  Draft,
+  Drag,
+  Dropdown,
+  DropdownArrow,
+  EditCalendar,
+  EditFill,
+  EditFillOut,
+  Ellipsis,
+  EllipsisH,
+  EllipsisV,
+  EllipsisVDouble,
+  EmailFill,
+  EmailFillOut,
+  EmotionGood,
+  EmotionNotGood,
+  EmotionOk,
+  EnvelopeFill,
+  EnvelopeFillOut,
+  ExclamationCircleFill,
+  ExclamationCircleFillOut,
+  Eye,
+  EyeOpen,
+  EyeSlash,
+  Facebook,
+  FeelingGreat,
+  FeelingOk,
+  File,
+  FileCopy,
+  FileDownload,
+  FilePdf,
+  FilePlusFill,
+  FilePlusFillOut,
+  Filter,
+  FlagFill,
+  FlagFillOut,
+  Flagged,
+  FolderDescriptionFill,
+  FolderShared,
+  FolderUser,
+  Forward,
+  GraduationCapFill,
+  GraduationCapFillOut,
+  HandPointerFill,
+  HandPointerFillOut,
+  Heart,
+  Home,
+  ImageLoading,
+  InProgress,
+  InactiveFill,
+  InactiveFillOut,
+  InfoButtons,
+  InfoCircleFill,
+  InfoCircleFillOut,
+  InfoFill,
+  InfoFillOut,
+  Instagram,
+  Italic,
+  LeftArrow,
+  Linkedin,
+  List,
+  ListOl,
+  Loading,
+  Location,
+  LocationF,
+  LockFill,
+  LockFillOut,
+  LockOpenFill,
+  LockOpenFillOut,
+  LogoGeneration,
+  LogoGoogle,
+  Logout,
+  MailFill,
+  MailFillOut,
+  Menu,
+  MessageLeftFill,
+  MessageLeftFillOut,
+  NotFeelingGood,
+  Notification,
+  OpenBook,
+  OrderDesc,
+  Padlock,
+  PadlockOpen,
+  PauseCircleFillOut,
+  PauseFill,
+  Pdf,
+  PencilFill,
+  PencilFillOut,
+  PendingApproval,
+  PhoneFill,
+  PhoneFillOut,
+  PinFill,
+  PinFillOut,
+  Placeholder,
+  Plane,
+  PlaneSlash,
+  Play,
+  PlayCircle,
+  Plus,
+  PlusCircleFill,
+  PlusCircleFillOut,
+  Previous,
+  Published,
+  Rectangle,
+  Rejected,
+  Reschedule,
+  RightArrow,
+  School,
+  Search,
+  Sections,
+  SendToCohort,
+  Setting,
+  SettingsEmpFill,
+  SettingsEmpFillOut,
+  Share,
+  ShareAlt,
+  ShareSquareFillOut,
+  Short,
+  ShortCenter,
+  Sigma,
+  SignOut,
+  Squares,
+  StarFill,
+  StarFillOut,
+  StarRound,
+  Status,
+  StopCircleFillOut,
+  StopFill,
+  StopFillOut,
+  Sunset,
+  SupervisorAccount,
+  Teams,
+  TimerFill,
+  TimerFillOut,
+  Times,
+  TimesCircleFill,
+  TimesCircleFillOut,
+  Translate,
+  TrashFillOut,
+  Twitter,
+  Underline,
+  Unpause,
+  UpIndicator,
+  UpTrend,
+  UpdateStage,
+  UploadCloud,
+  UploadSquare,
+  User,
+  UserCircle,
+  Users,
+  Verified,
+  Vimeo,
+  Visibility,
+  VisibilityOff,
+  Waffle,
+  Work,
+  Xa,
+
+} from '@generation/icons';
+
+const Gallery = () => {
+  return (
+    <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">
+          <AddCircle />
+        </div>
+        <span>AddCircle</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">
+          <ApplicantStatus />
+        </div>
+        <span>ApplicantStatus</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">
+          <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">
+          <AssingMobilizer />
+        </div>
+        <span>AssingMobilizer</span>
+      </div>
+      <div className="gallery-item">
+        <div className="gallery-svg">
+          <Aui />
+        </div>
+        <span>Aui</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">
+          <Bookmark />
+        </div>
+        <span>Bookmark</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">
+          <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">
+          <ChatFilled />
+        </div>
+        <span>ChatFilled</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">
+          <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">
+          <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">
+          <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">
+          <Dashboard />
+        </div>
+        <span>Dashboard</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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <Heart />
+        </div>
+        <span>Heart</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">
+          <InProgress />
+        </div>
+        <span>InProgress</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">
+          <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">
+          <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">
+          <LeftArrow />
+        </div>
+        <span>LeftArrow</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">
+          <Location />
+        </div>
+        <span>Location</span>
+      </div>
+      <div className="gallery-item">
+        <div className="gallery-svg">
+          <LocationF />
+        </div>
+        <span>LocationF</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">
+          <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">
+          <Logout />
+        </div>
+        <span>Logout</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">
+          <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">
+          <NotFeelingGood />
+        </div>
+        <span>NotFeelingGood</span>
+      </div>
+      <div className="gallery-item">
+        <div className="gallery-svg">
+          <Notification />
+        </div>
+        <span>Notification</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">
+          <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">
+          <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">
+          <Pdf />
+        </div>
+        <span>Pdf</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">
+          <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">
+          <Play />
+        </div>
+        <span>Play</span>
+      </div>
+      <div className="gallery-item">
+        <div className="gallery-svg">
+          <PlayCircle />
+        </div>
+        <span>PlayCircle</span>
+      </div>
+      <div className="gallery-item">
+        <div className="gallery-svg">
+          <Plus />
+        </div>
+        <span>Plus</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">
+          <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">
+          <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">
+          <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">
+          <Sections />
+        </div>
+        <span>Sections</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">
+          <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">
+          <Share />
+        </div>
+        <span>Share</span>
+      </div>
+      <div className="gallery-item">
+        <div className="gallery-svg">
+          <ShareAlt />
+        </div>
+        <span>ShareAlt</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">
+          <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">
+          <StarRound />
+        </div>
+        <span>StarRound</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">
+          <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">
+          <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">
+          <Twitter />
+        </div>
+        <span>Twitter</span>
+      </div>
+      <div className="gallery-item">
+        <div className="gallery-svg">
+          <Underline />
+        </div>
+        <span>Underline</span>
+      </div>
+      <div className="gallery-item">
+        <div className="gallery-svg">
+          <Unpause />
+        </div>
+        <span>Unpause</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">
+          <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">
+          <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">
+          <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">
+          <Waffle />
+        </div>
+        <span>Waffle</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>
+  );
+};
+
+export default Gallery;