Icons

Icons lets you define the default appearance of Creative Elements icons across your store. You can control their Normal and Hover colors, size, spacing, border width, and corner radius from one central place.

The meaning of Primary and Secondary Color changes depending on whether an icon uses the Default, Framed, or Stacked view. This allows the same Theme Style settings to work with different icon presentations.

Tip: Use a small number of consistent icon styles across the store. Keeping icon colors, sizes, and shapes related to the rest of your design system makes the interface more cohesive.
Icon style settings
Normal

Define the default colors of icons before interaction.

Primary Color
Set the main icon color. Its role depends on the icon view:
  • Default: Icon color.
  • Framed: Icon color.
  • Stacked: Background color.
Secondary Color
Set the secondary color:
  • Default: Not used.
  • Framed: Background color.
  • Stacked: Icon color.
Hover

Define the colors displayed when an icon is hovered or focused.

Primary Color
In Default and Framed views, set the icon color. In Stacked view, set the background color.
Secondary Color
In Framed view, set the background color. In Stacked view, set the icon color. It is not used by Default view.
Size and Shape
Size
Set the icon size independently for responsive devices. The available range is 6px to 300px.
Padding
Set the space around Framed and Stacked icons. Available units are px and em. Padding does not apply to Default view.
Border Width
Set the border width of Framed icons. Link the values or control the four sides independently.
Border Radius
Round the corners of square Framed and Stacked icons. Available units are px and %.

Icon views

Creative Elements icons can use different visual views. Theme Style adapts the Primary and Secondary Color settings according to the selected view.

Default
Displays the icon without a surrounding frame or filled background. Primary Color controls the icon itself; Secondary Color is not used.
Framed
Displays the icon inside a bordered frame. Primary Color controls the icon, while Secondary Color controls the background.
Stacked
Displays the icon on a filled background. Primary Color controls the background, while Secondary Color controls the icon.
Important: Primary and Secondary do not always mean icon color and background color respectively. Their roles switch between Framed and Stacked views.

Normal and Hover colors

The Normal state defines the standard icon colors, while the Hover state defines the colors used when visitors hover over or focus an icon.

Tip: If an icon is clickable, use a noticeable but consistent Hover state. For decorative icons that are not interactive, a strong hover change may incorrectly suggest that the icon is clickable.

Size

Size controls the dimensions of the icon itself and is responsive, so you can use different sizes for desktop, tablet, and mobile. The available range is 6px to 300px.

Tip: Keep icons that serve the same purpose at a consistent size. Similar components should generally follow the same sizing rules.

Padding

Padding adds space around the icon when using the Framed or Stacked view. It changes the overall icon container without changing the size of the icon graphic itself.

Padding can be set in px or em. Using em makes the spacing relative to the icon size.

Note: Padding does not affect icons using the Default view.

Border Width

Border Width controls the thickness of the border around Framed icons. Each side can be adjusted independently or linked for a uniform border. This setting does not apply to Default or Stacked icons.

Border Radius

Border Radius controls the corner rounding of square Framed and Stacked icons. Values can be set in px or % and configured separately for each corner.

Tip: Coordinate icon corner radius with buttons, cards, and other interface elements. Reusing related shapes helps create a consistent visual language.

Using Global Colors

Primary and Secondary icon colors can be connected to Global Colors instead of being entered manually. This is useful when icons should follow recurring brand or interface colors.

Tip: Reuse Global Colors for icon styles that appear throughout the site. This makes later visual identity changes much easier to manage.

Global styles and individual icon styles

Theme Style provides the default appearance of Creative Elements icons, but individual widgets can still define their own icon colors, sizes, and other styles. Local widget settings can therefore override these global values.

Good to know: The final appearance also depends on the view and shape selected by the individual icon or widget. Theme Style controls the visual properties, but it does not force every icon to use the same Default, Framed, or Stacked view.

Recommended workflow

  1. Choose recurring icon colors and connect them to Global Colors where appropriate.
  2. Configure the Normal Primary and Secondary colors.
  3. Set Hover colors for interactive icons.
  4. Define a responsive default Size.
  5. Configure Padding if your design commonly uses Framed or Stacked icons.
  6. Set Border Width for Framed icons if needed.
  7. Choose a Border Radius that matches the shapes used elsewhere in your design system.
  8. Use individual widget styling only when a specific icon needs to differ from the global defaults.
© WebshopWorks - Professional PrestaShop Addons