Skip to Main Content
  • APEX 21.1 Icon Review

Breadcrumb

 

Font APEX File Icons

Icon ClassIcon
(small)
Icon
(large)
Icon
(small × 5)
Icon
(large × 5)
Notes
fa-file-o

fa-file-o

  • Original file icon style. Note gap on the inside edge of "dog-ear" corner in original Font APEX icons
fa-file-archive-o

    fa-file-arrow-down

      fa-file-arrow-up

        fa-file-audio-o

          fa-file-ban

            fa-file-bookmark

              fa-file-brackets

              fa-file-brackets

              • Missing gap in corner
              • Squatter, less attractive proportions
              fa-file-chart

                fa-file-check

                  fa-file-clock

                    fa-file-code-o

                      fa-file-csv

                      fa-file-csv

                      • Missing gap in corner
                      • Wrong proportions
                      • Text in small version should be positioned higher, and the bottom edge line should continue to half the width
                      • Text in large version is not in a floating box like other icons showing a file extension
                      • Different lettering style—compare more angular "S" and "C" on original fa-file-excel-o and fa-file-word-o icons
                      fa-file-cursor

                        fa-file-edit

                          fa-file-excel-o

                            fa-file-heart

                              fa-file-image-o

                                fa-file-json

                                fa-file-json

                                • Missing gap in corner
                                • Wrong proportions
                                • Text in small version should be positioned higher, and the bottom edge line should continue to half the width
                                • Text in large version is not in a floating box like other icons showing a file extension
                                • Different lettering style
                                • Text can be made narrower to fit the original icon size abd proportions by using the original angular style and a lower-case style reprensentation of the "N", with a semi-rounded top instead of a diagonal crossbar
                                fa-file-lock

                                  fa-file-medical

                                  fa-file-medical

                                  • Missing gap in corner
                                  • Wrong proportions
                                  fa-file-new

                                    fa-file-pdf-o

                                      fa-file-play

                                        fa-file-plus

                                          fa-file-pointer

                                            fa-file-powerpoint-o

                                              fa-file-prescription

                                              fa-file-prescription

                                              • Missing gap in corner
                                              • Wrong proportions
                                              • Different lettering style
                                              fa-file-search

                                                fa-file-signature

                                                fa-file-signature

                                                • Missing gap in corner
                                                • Wrong proportions
                                                fa-file-sql

                                                  fa-file-text-o

                                                    fa-file-user

                                                      fa-file-video-o

                                                        fa-file-word-o

                                                          fa-file-wrench

                                                            fa-file-x

                                                              fa-files-o

                                                                New 21.1 Icons

                                                                Icon ClassIcon
                                                                (small)
                                                                Icon
                                                                (large)
                                                                Icon
                                                                (small × 5)
                                                                Icon
                                                                (large × 5)
                                                                Notes
                                                                fa-2d-mode

                                                                fa-2d-mode

                                                                • Different lettering style—compare "D" in original fa-file-word-o icon
                                                                • Inconsistent line width on bow of "D"
                                                                • Not really sure what the use case for this is in an APEX context, but if it has one I would prefer to see a pictorial rather than textual representation
                                                                fa-3d-mode

                                                                fa-3d-mode

                                                                • Different lettering style
                                                                • Inconsistent line width on bow of "D"
                                                                • Not really sure what the use case for this is in an APEX context, but if it has one I would prefer to see a pictorial rather than textual representation
                                                                fa-404

                                                                fa-404

                                                                • Inconsistent element proportions between small and large versions (e.g. size and spacing of eyes)
                                                                fa-4k

                                                                fa-4k

                                                                • Inconsistent element proportions between small and large versions
                                                                fa-abacus

                                                                fa-abacus

                                                                • Inconsistent design approach between small and large versions: large version adds more design elements at the same size rather than increasing the size of those used in the small icon (compare with fa-accessor icons below)
                                                                fa-accessor-more

                                                                  fa-accessor-one

                                                                    fa-accordion

                                                                    fa-accordion

                                                                    • Don't think the meaning of this is particularly clear
                                                                    • Potential use cases are also unclear, now that APEX has dropped support for jQuery UI accordions!
                                                                    • Circles on large version are confusing and unnecessary
                                                                    fa-alarm-check

                                                                    fa-alarm-check

                                                                    • Alarm bells on small version look more like buttons, which gives the impression of a stopwatch rather than an alarm clock. Can't these be made to have a more rounded appearance?
                                                                    • Conversely on the large version, the attachment of the alarm bells directly to the body of the clock gives the appearance of ears on a teddy bear. I would suggest they be physically separated like the small version
                                                                    fa-alarm-clock

                                                                    fa-alarm-clock

                                                                    • Large version: inconsistent line width on curve of right alarm bell
                                                                    fa-alarm-minus

                                                                    fa-alarm-minus

                                                                    • Large version: inconsistent line widths on curves of alarm bells
                                                                    fa-alarm-plus

                                                                    fa-alarm-plus

                                                                    • Large version: inconsistent line widths on curves of alarm bells
                                                                    fa-alarm-snooze

                                                                    fa-alarm-snooze

                                                                    • Large version: inconsistent line widths on curves of alarm bells
                                                                    fa-alarm-times

                                                                    fa-alarm-times

                                                                    • Large version: inconsistent line widths on curves of alarm bells
                                                                    • Large version looks like a koala
                                                                    fa-analytics

                                                                      fa-badge

                                                                        fa-badge-check

                                                                          fa-badge-dollar

                                                                            fa-badge-percent

                                                                              fa-biohazard

                                                                                fa-bug-slash

                                                                                fa-bug-slash

                                                                                • Don't think this works. Slash should not overlap any of the bug's legs
                                                                                fa-file-brackets

                                                                                fa-file-brackets

                                                                                • See previous evaluation of file icons
                                                                                fa-file-csv

                                                                                fa-file-csv

                                                                                • See previous evaluation of file icons
                                                                                fa-file-json

                                                                                fa-file-json

                                                                                • See previous evaluation of file icons
                                                                                fa-file-medical

                                                                                fa-file-medical

                                                                                • See previous evaluation of file icons
                                                                                fa-file-prescription

                                                                                fa-file-prescription

                                                                                • See previous evaluation of file icons
                                                                                fa-file-signature

                                                                                fa-file-signature

                                                                                • See previous evaluation of file icons
                                                                                fa-flag-pennant

                                                                                  fa-flag-pennant-o

                                                                                    fa-flag-swallowtail

                                                                                      fa-flag-swallowtail-o

                                                                                        fa-frown

                                                                                          fa-heat-map

                                                                                          fa-heat-map

                                                                                          fa-line-map

                                                                                          fa-line-map

                                                                                          • This (especially the small version) meant nothing to me when I first saw it, seemingly bearing more resemblance to the ideogram on the original fa-language icon than Beck's classic tube map
                                                                                          • Why don' the lines attach at the centre of the nodes?
                                                                                          fa-location

                                                                                            fa-location-slash

                                                                                              fa-location-arrow-solid

                                                                                              fa-location-arrow-solid

                                                                                              • This violates the established Font APEX icon class naming convention. The -solid suffix is superfluous. The problem is that the pre-existing fa-location-arrow icon should have been called fa-location-arrow-o as it is an outline icon. In my opinion the naming convention should take precedence, with this new icon being named fa-location-arrow, and the earlier implementation being renamed fa-location-arrow-o, even if this changes the appearance of existing applications
                                                                                              fa-location-circle

                                                                                              fa-location-circle

                                                                                              • This violates the established Font APEX icon class naming convention. Should be fa-location-circle-o
                                                                                              fa-location-circle-solid

                                                                                              fa-location-circle-solid

                                                                                              • This violates the established Font APEX icon class naming convention. Should be fa-location-circle
                                                                                              fa-map-marker-slash

                                                                                                fa-map-marker-camera

                                                                                                fa-map-marker-camera

                                                                                                • I don't like this. It's not at all clear what the small version (especially at the default 16px size) is supposed to represent
                                                                                                fa-map-marker-camera-o

                                                                                                fa-map-marker-camera-o

                                                                                                • Also don't like this. Looks like the camera is melting
                                                                                                fa-map-marker-check

                                                                                                  fa-map-marker-check-o

                                                                                                    fa-map-marker-face-frown

                                                                                                      fa-map-marker-face-frown-o

                                                                                                        fa-map-marker-face-meh

                                                                                                          fa-map-marker-face-meh-o

                                                                                                            fa-map-marker-face-smile

                                                                                                              fa-map-marker-face-smile-o

                                                                                                                fa-map-marker-slash-o

                                                                                                                  fa-map-marker-s

                                                                                                                    fa-map-marker-shine

                                                                                                                      fa-map-marker-shine-o

                                                                                                                        fa-map-markers

                                                                                                                          fa-map-markers-o

                                                                                                                            fa-map-pin-circle

                                                                                                                              fa-map-pin-circle-o

                                                                                                                                fa-map-pin-heart

                                                                                                                                  fa-map-pin-heart-o

                                                                                                                                    fa-map-pin-triangle

                                                                                                                                      fa-map-pin-triangle-o

                                                                                                                                        fa-medical-mask

                                                                                                                                        fa-medical-mask

                                                                                                                                        • It's not obvious this is supposed to represent. It's actually quite similar to the pre-existing fa-trophy
                                                                                                                                        fa-medication

                                                                                                                                          fa-medication-pill

                                                                                                                                            fa-medication-pill-bottle

                                                                                                                                              fa-medication-pills

                                                                                                                                                fa-meh

                                                                                                                                                  fa-nurse

                                                                                                                                                    fa-podium

                                                                                                                                                      fa-prescription

                                                                                                                                                      fa-prescription

                                                                                                                                                      • Different lettering style
                                                                                                                                                      fa-prescription-sheet

                                                                                                                                                      fa-prescription-sheet

                                                                                                                                                      • Why is this necessary? It's virtually the same as fa-file-prescription, which if implemented properly following the original file icon conventions would look far better. I would much rather have another occupational icon representing a pharmacist/scientist/professional or engineer/builder than this amateurish duplicate of another icon.
                                                                                                                                                      • Different lettering style
                                                                                                                                                      fa-presentation

                                                                                                                                                        fa-radiation

                                                                                                                                                        fa-radiation

                                                                                                                                                        • Central dot in small version is too small
                                                                                                                                                        • Would look better if the "rays" were represented either by concentric lines (see existing fa-feed icon) or if the segments were equal in size or smaller than the gaps between them
                                                                                                                                                        fa-size-l

                                                                                                                                                        fa-size-l

                                                                                                                                                        • Are these really necessary? In what circumstances would they be used instead of plain text?
                                                                                                                                                        fa-size-m

                                                                                                                                                          fa-size-s

                                                                                                                                                          fa-size-s

                                                                                                                                                          • Different lettering style
                                                                                                                                                          fa-size-xl

                                                                                                                                                          fa-size-xl

                                                                                                                                                          • Inconsistent and poor letter spacing
                                                                                                                                                          fa-size-xs

                                                                                                                                                          fa-size-xs

                                                                                                                                                          • Different lettering style
                                                                                                                                                          • Inconsistent and poor letter spacing
                                                                                                                                                          fa-size-xxl

                                                                                                                                                          fa-size-xxl

                                                                                                                                                          • Inconsistent and poor letter spacing
                                                                                                                                                          fa-smile

                                                                                                                                                            fa-sort-amount-asc-alt

                                                                                                                                                              fa-sort-amount-desc-alt

                                                                                                                                                                fa-syringe

                                                                                                                                                                  fa-tasks-alt

                                                                                                                                                                    fa-text-color

                                                                                                                                                                      fa-traffic-light

                                                                                                                                                                        fa-traffic-light-go

                                                                                                                                                                          fa-traffic-light-stop

                                                                                                                                                                            fa-user-slash

                                                                                                                                                                            fa-user-slash

                                                                                                                                                                            • This does not look good. A steeper angle on the slash would enable more of the base user outline to be retained. Existing -slash icons position the slash at different angles to better fit with the underlying design
                                                                                                                                                                            fa-users-alt

                                                                                                                                                                              fa-vial

                                                                                                                                                                                fa-vials

                                                                                                                                                                                  fa-workflow

                                                                                                                                                                                    fa-x-ray