Icon Classes

Here is a complete list of CSS variables for icon classes, formatted for easy pasting into Bricks Builder’s CSS Variables section. These variables include different sizes and color styles for accent, dark, and light icons.

/* Accent Icons */
--c-icon-accent-s: 16px; /* Small Accent Icon */
--c-icon-accent-m: 24px; /* Medium Accent Icon */
--c-icon-accent-l: 32px; /* Large Accent Icon */
--c-icon-accent-color: #ff6347; /* Example accent color, adjust as needed */

/* Dark Icons */
--c-icon-dark-s: 16px; /* Small Dark Icon */
--c-icon-dark-m: 24px; /* Medium Dark Icon */
--c-icon-dark-l: 32px; /* Large Dark Icon */
--c-icon-dark-color: #222222; /* Dark color, adjust as needed */

/* Light Icons */
--c-icon-light-s: 16px; /* Small Light Icon */
--c-icon-light-m: 24px; /* Medium Light Icon */
--c-icon-light-l: 32px; /* Large Light Icon */
--c-icon-light-color: #f9f9f9; /* Light color, adjust as needed */

How to Use in Bricks Builder

Paste the Variables: Copy all the lines and paste them into the CSS Variables field in Bricks Builder under Bricks > Settings > Variables.
Using the Variables in CSS:
- Icon Sizes: Set width and height for icons.

width: var(--c-icon-accent-m); /* Medium accent icon */
height: var(--c-icon-accent-m);

Icon Colors: Apply the color using color or fill (for SVG icons).

color: var(--c-icon-accent-color); /* Accent color */
color: var(--c-icon-dark-color); /* Dark icon color */

These variables allow you to quickly apply different sizes and colors to icons across your design, making it easy to maintain consistency in Bricks Builder. Adjust the values as needed for your project.

Combined Variables Entry for Bricks

If you want to enter all these variables into Bricks in one go, here’s the full list combined for easy copy-pasting (with semicolons separating each variable):

--columns-6: repeat(6, 1fr); --columns-5: repeat(5, 1fr); --columns-4: repeat(4, 1fr); --columns-3: repeat(3, 1fr); --columns-2: repeat(2, 1fr); --columns-xl-5: repeat(5, 1fr); --columns-xl-4: repeat(4, 1fr); --columns-xl-3: repeat(3, 1fr); --columns-xl-2: repeat(2, 1fr); --columns-xl-1: repeat(1, 1fr); --columns-l-4: repeat(4, 1fr); --columns-l-3: repeat(3, 1fr); --columns-l-2: repeat(2, 1fr); --columns-l-1: repeat(1, 1fr); --columns-m-3: repeat(3, 1fr); --columns-m-2: repeat(2, 1fr); --columns-m-1: repeat(1, 1fr); --columns-s-2: repeat(2, 1fr); --columns-s-1: repeat(1, 1fr); --columns-1-3: 1fr 3fr; --columns-3-1: 3fr 1fr; --columns-1-2: 1fr 2fr; --columns-2-1: 2fr 1fr; --columns-2-3: 2fr 3fr; --columns-3-2: 3fr 2fr;

background-color: var(--c-bg-light); /* Light background */
opacity: var(--c-opacity-50); /* 50% opacity */

color: var(--c-link-accent); /* Accent link color */
font-size: var(--c-link-m); /* Medium link size */