The ACSS Icon Framework makes icon styling a breeze. To get started, enable the Icon Framework from Dashboard > Icons.
Styling Icons
Add an icon to your site using the SVG, Icon, or Code elements.
To apply Icon Framework styling to your icon, you need to add the data attribute data-icon. Here’s an example of how to do this in Bricks:
The presence of data-icon does all the work. Once that attribute is present, ACSS is controlling all relevant icon styles by default and the entire Icon Framework is available to you for tweaking.
Note: If using a code element, make sure the code is rendered without a wrapper and that data-icon is added directly to the <svg> element, like this:
<svg data-icon xmlns="http://www.w3.org/2000/svg" ... />
Code language: HTML, XML (xml)Styling Icons – Boxed vs Not-Boxed
It’s important to decide whether or not you want boxed-style icons before you start doing any styling. Boxed icons have many advantages over non-boxed icons, but it’s still a personal choice.
Benefits of Boxed Icons
- Easier to achieve perfect alignment of icons
- More styling options and more hover options
- Typically looks more consistent
- Easier to cover up imperfections in icon sizes/sets.
We recommend Boxed Icons, but the decision is up to you. Navigate to Icons > Options and toggle Boxed Icons on/off:
Styling Icons – Default Styling
There are two icon styles to choose from: Light and Dark.
The typical interpretation of these labels is as follows:
- For Boxed Icons
- Light – Icons that have a light background and darker icon.
- Dark – Icons that have a dark background and lighter icon.
- For Non-Boxed Icons
- Light – Icons that are light and typically used on dark backgrounds.
- Dark – Icons that are dark and typically used on light backgrounds.
To get started, set your Global Icon Styles as well as your Default Icon Style.
Global Styles are styles that affect all icons regardless of whether they’re Light or Dark.
- Default Icon Style – The color style an icon will inherit by default.
- Icon Padding (Boxed Only) – The padding around your icon (creates the box).
- Icon Border Width (Boxed Only) – The thickness of the border on the icon box.
- Icon Border Style (Boxed Only) – The style of the border on the icon box.
- Icon Radius (Boxed Only) – The radius of the border on the icon box.
Styling Icons – Dark & Light Styles
Once you’ve set your default styles, you can set the following styles related to the Dark or Light icon set.
- Icon Color – The color of the icon.
- Icon Background (Boxed Only) – The background color of the icon box.
- Border Color (Boxed Only) – The color of the border on the icon box.
- Box Shadow (Boxed Only) – The shadow around the icon box.
Icon Sizes
By default, you have three icon sizes to choose from with the default being “M” or Medium.
Three options should be enough for most projects, but if you need more you can navigate to Icons > Options and turn on Expand Icon Sizes.
To change the size of an icon, use .icon--{size}. This can be placed on an individual icon or on a group of icons. For example, .icon--l will make an icon(s) adopt the large values.
You control the size of these options from the Icon Sizes accordion. When Boxed Icons is turned on, you can also control the padding values for each size. By default they reference your general icon padding value, which is relative to the size.
Tip: If you feel you need to adjust icon padding, try adjusting the default icon padding value first rather than adjusting the padding of each individual size. This is more likely to maintain padding consistency.
Icon Lists
The Icon Framework has support for icon lists, which also have separate styling options.
You can turn a list into an icon list by applying either the [data-icon-list] attribute to the list element (<ul> or <ol>) or by using the utility class .icon-list.
Either will work:
<ul class="icon-list"></ul>
<ul data-icon-list class="whatever"></ul>
Code language: HTML, XML (xml)This assumes your icons in the list are still placed with icon elements, SVGs, or Code elements. The framework does not support pseudo element icons out of the box due to CSS limitations.
Once you have an icon list, you can adjust styles accordingly:
- Boxed List Icons – You can turn off the box styling for list icons if needed.
- Icon Size – The default size of an icon in a list.
- List Gap – The space between list items in your list.
- Inline Offset – If the spacing seems off, you can nudge your icons left or right.
- Block Offset – If the spacing seems off, you can nudge your icons up or down.
Applying Icon Styling Manually
Every property in the Icon Framework is represented as a variable, making it easy to reference or override any style at any time. You can also deploy icon styling to any icon using the icon() mixin.