Home
Setup
Basics
- Heading
- Typography
- Colours
- Icons
- Layout
- Footer
- Utilities
Containers
Form Elements
- Form Field
- Labels
- Inputs
- Password
- Textarea
- Radios
- Checkbox
- Toggles
- Select
- File Uploads
- Image Uploads
- Insert Variables
- Calendar
- Buttons
- Icon Buttons
- WP Editor
- Multiple Strings
Simple Elements
- Notifications
- Tags
- Tooltips
- Status Dot
- Tables
- Scores
- Progress Bar
- Code Snippets
- Code Editor
- Dropdowns
- Field List
- Tree Selectors
- Pagination
- Recipient
- Colour Picker
Composite Elements
- Tabs
- Side Tabs
- Selectors
- Builder
- Accordions
- Side Navigation
- Modals
- Summary
Upsells

Menu
RTL Language
Monochrome

Version 2.12.24

Icons

List Icons
Documentation

List Icons

Documentation

Icon Sizes The default size of an icon is the same as its parent element. For more specific sizes, you can choose from the following:

1. Small
2. Medium
3. Large
4. Extra Large

<span class="sui-icon-wpmudev-logo sui-sm" aria-hidden="true"></span>

<span class="sui-icon-wpmudev-logo sui-md" aria-hidden="true"></span>

<span class="sui-icon-wpmudev-logo sui-lg" aria-hidden="true"></span>

<span class="sui-icon-wpmudev-logo sui-xl" aria-hidden="true"></span>

Fixed Width Great to use when different icon widths throw off alignment. Especially useful in things like nav lists and list groups.

Use sui-fw class to set icons at a fixed width.

Hummingbird
Code
Defender

<span class="sui-icon-hummingbird sui-fw" aria-hidden="true"></span>

Animated Spin indefinitely an icon whenever you need to.

Use sui-loading class to spin the icon.

<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>