Skip to main content

Common Icons


Enhancing user experience within applications heavily relies on the effective use of icons. For frontend JavaScript developers engaged in BuildFire's plugin ecosystem, the process of seamlessly integrating icons has been significantly streamlined through the introduction of common icons. This article delves into the concept of common icons, explains their role in simplifying development, and emphasizes their importance as a vital asset in your developer toolkit.

Common icons serve to eliminate the need for embedding specific icon packages into your plugin code. Instead, by leveraging BuildFire's pre-defined common icon names, developers can now benefit from a dynamic rendering system that seamlessly adapts based on the chosen icon package within the Control Panel.

Compatibility with Icon Packages

When a user selects an icon package through the Control Panel, the common icons you've integrated automatically render with the chosen package.


Consider a plugin under development that entails search, addition, and copying functionalities. To provide comprehensive support for diverse icon packages, the following are examples of common icons:

  • bf-icon-search for search-related interactions.
  • bf-icon-add to signify content or feature addition.
  • bf-icon-copy to indicate actions related to copy.

The following sample images show search icon bf-icon-search in different icon packages, the first image shows the icon rendered as a bootstrap icon while the second shows as a glyph icon: Deep Link Deep Link

Implementing in HTML Tags

The following example shows how to implement common icons in HTML tags:

<span class="bf-icon bf-icon-search"></span>

List of Common Icons

Here's a comprehensive list of common icons along with their usage:

Icon Class NameIcon Usage
bf-icon-searchSearch-related interactions
bf-icon-addSignify content or feature addition
bf-icon-arrow-upIndicate upward direction
bf-icon-arrow-downIndicate downward direction
bf-icon-arrow-leftIndicate leftward direction
bf-icon-arrow-rightIndicate rightward direction
bf-icon-calendarRepresent calendar or date-related
bf-icon-star-fillFilled star icon
bf-icon-starHollow star icon
bf-icon-deleteIndicate deletion or removal
bf-icon-tagTag-related interactions
bf-icon-listRepresent a list or list-related
bf-icon-geo-altAlternative geo location icon
bf-icon-question-circleQuestion or help-related icon
bf-icon-log-outSignify user logout
bf-icon-log-inSignify user login
bf-icon-mailRepresent email or mail-related
bf-icon-bellIndicate notifications or alerts
bf-icon-option-verticalVertical options or settings
bf-icon-option-horizontalHorizontal options or settings
bf-icon-funnelRepresent filtration or funneling
bf-icon-pencil-squareSquare-pencil or edit-related
bf-icon-pencilPencil or edit-related
bf-icon-crossIndicate cancellation or closure
bf-icon-linkRepresent linking or connection
bf-icon-globeIndicate global or world-related
bf-icon-phoneRepresent phone or call-related
bf-icon-userRepresent user or user-related
bf-icon-homeIndicate home or main page
bf-icon-copyIndicate copy or duplication