Icons
How to integrate icons in CodyFrame.
Set your custom icon options in the 📁 custom-style/_icons.scss
file.
🔍 On this page:
.icon Class #
The .icon
class is used to set the basic style for all icons. Make sure to add this class to all your icon elements.
If you are using an icon font, make sure to include the font-family inside the 📁 custom-style/_icons.scss
file:
.icon {
font-family: 'fontName';
}
Sizes #
CodyFrame includes a default scale of icon sizes. Optionally, you can set a custom size scale in the 📁 custom-style/_icons.scss
file:
:root {
// default icon sizes
--icon-xxxs: 8px;
--icon-xxs: 12px;
--icon-xs: 16px;
--icon-sm: 24px;
--icon-md: 32px;
--icon-lg: 48px;
--icon-xl: 64px;
--icon-xxl: 96px;
--icon-xxxl: 128px;
}
To change the icon size, use one of the custom properties above in CSS, or the following utility classes:
Class | Description |
---|---|
.icon--xxxs |
Set icon size equal to var(--icon-xxxs) |
.icon--xxs |
Set icon size equal to var(--icon-xxs) |
.icon--xs |
Set icon size equal to var(--icon-xs) |
.icon--sm |
Set icon size equal to var(--icon-sm) |
.icon--md |
Set icon size equal to var(--icon-md) |
.icon--lg |
Set icon size equal to var(--icon-lg) |
.icon--xl |
Set icon size equal to var(--icon-xl) |
.icon--xxl |
Set icon size equal to var(--icon-xxl) |
.icon--xxxl |
Set icon size equal to var(--icon-xxxl) |
Aligning Icons with Text #
To align icons and text, you can use the flexbox utility classes. Because the default size of the .icon
component is 1em, the icon size is equal to the current font-size:
Integrate your Icons #
There are multiple options when it comes to integrating icons into your design system (SVG Sprites, inline SVG, SVG symbols, icon fonts...). You can pick whatever method you prefer, they are all compatible with CodyFrame.
If you're not sure about which method to choose, take a look at this article on integrating and styling icon systems.
Other Classes #
Other icon classes:
Class | Description |
---|---|
.icon--is-spinning |
rotate the icon infinitely |