scinote-web/app/views/design_elements/_icons.html.erb

<% sn_icons = [
  "sn-icon-info",
  "sn-icon-arrow-left",
  "sn-icon-arrow-right",
  "sn-icon-visibility-show",
  "sn-icon-visibility-hide",
  "sn-icon-versions",
  "sn-icon-users",
  "sn-icon-user",
  "sn-icon-updates",
  "sn-icon-teams",
  "sn-icon-task",
  "sn-icon-task-status-flow",
  "sn-icon-task-data-display",
  "sn-icon-tag",
  "sn-icon-tag-color",
  "sn-icon-tables",
  "sn-icon-support",
  "sn-icon-steps",
  "sn-icon-status-not-started",
  "sn-icon-status-in-progress",
  "sn-icon-status-done",
  "sn-icon-sort",
  "sn-icon-sort-up",
  "sn-icon-sort-down",
  "sn-icon-sign-out",
  "sn-icon-shared",
  "sn-icon-settings",
  "sn-icon-send",
  "sn-icon-send-solid",
  "sn-icon-search",
  "sn-icon-search-options",
  "sn-icon-results",
  "sn-icon-result-text",
  "sn-icon-result-image",
  "sn-icon-restore",
  "sn-icon-resize",
  "sn-icon-reset-password",
  "sn-icon-reports",
  "sn-icon-navigator-light",
  "sn-icon-navigator",
  "sn-icon-read-more",
  "sn-icon-protocols-templates",
  "sn-icon-projects",
  "sn-icon-project-member-access",
  "sn-icon-printer",
  "sn-icon-down",
  "sn-icon-notifications",
  "sn-icon-notes",
  "sn-icon-new-task",
  "sn-icon-right",
  "sn-icon-left",
  "sn-icon-move",
  "sn-icon-more-vert",
  "sn-icon-more-hori",
  "sn-icon-minus",
  "sn-icon-mini-folder-left",
  "sn-icon-manuscript",
  "sn-icon-manage-table",
  "sn-icon-locked-task",
  "sn-icon-location",
  "sn-icon-list-view",
  "sn-icon-inventory",
  "sn-icon-inventory-share",
  "sn-icon-inventory-edit",
  "sn-icon-import",
  "sn-icon-help",
  "sn-icon-help-s",
  "sn-icon-hamburger",
  "sn-icon-hamburger-big",
  "sn-icon-grid-view",
  "sn-icon-folder",
  "sn-icon-filter",
  "sn-icon-files",
  "sn-icon-file-word",
  "sn-icon-file-powerpoint",
  "sn-icon-file-excel",
  "sn-icon-export",
  "sn-icon-experiment",
  "sn-icon-expand",
  "sn-icon-edit",
  "sn-icon-duplicate",
  "sn-icon-drag",
  "sn-icon-double-navigate-before",
  "sn-icon-double-navigate-after",
  "sn-icon-dot-small",
  "sn-icon-delete",
  "sn-icon-dashboard",
  "sn-icon-created",
  "sn-icon-courses",
  "sn-icon-comments",
  "sn-icon-collapse",
  "sn-icon-close",
  "sn-icon-close-small",
  "sn-icon-up",
  "sn-icon-checkllist",
  "sn-icon-check",
  "sn-icon-card-view",
  "sn-icon-calendar",
  "sn-icon-calendar-small",
  "sn-icon-barcode",
  "sn-icon-attachment",
  "sn-icon-archive",
  "sn-icon-approval",
  "sn-icon-approval-small",
  "sn-icon-add-user",
  "sn-icon-activities",
  "sn-icon-send-comment",
  "sn-icon-assign-to-task",
  "sn-icon-arrow-down",
  "sn-icon-arrow-up",
  "sn-icon-signature",
  "sn-icon-industry",
  "sn-icon-alert-success",
  "sn-icon-alert-warning",
  "sn-icon-alert-destructive",
  "sn-icon-txt-t",
  "sn-icon-txt-a",
  "sn-icon-file-pdf",
  "sn-icon-save",
  "sn-icon-archived",
  "sn-icon-star",
  "sn-icon-star-filled",
  "sn-icon-marvinjs",
  "sn-icon-sequence-editor"
]
%>

<div class="grid grid-cols-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 mt-5">
  <% sn_icons.each do |icon| %>
    <div class="border p-2 flex flex-col items-center">
      <span class="sn-icon <%= icon %> text-2xl"></span>
      <p class="text-sm mt-2 border-t pt-2"><%= icon %></p>
    </div>
  <% end %>
</div>