Skip to main content

Icons

Configure icon sets and UI indicators for your theme.

Overview​

Icons in TheDock serve two purposes:

  1. UI Indicators - Arrows, chevrons, close buttons used by built-in blocks
  2. Icon Libraries - Full icon sets for use throughout your theme

All built-in blocks (galleries, navigation, etc.) automatically use the icons configured in this section.

UI Indicators​

TheDock uses icons for interactive elements:

IndicatorUsed In
Arrow Left/RightImage galleries, carousels
Arrow Up/DownAccordions, dropdowns
CloseModals, notifications
MenuMobile navigation toggle
SearchSearch forms
External LinkLinks opening in new tab

Customizing Indicators​

  1. Go to Design > Icons
  2. Find the indicator you want to change
  3. Select from available icon options
  4. Preview changes in real-time

Icon Style​

Choose the overall style of UI icons:

StyleDescription
OutlinedLine icons, minimal weight
FilledSolid icons, more visual weight
RoundedSoft corners, friendly feel
SharpAngular, modern aesthetic

The style affects all UI indicators throughout your theme.

Icon Libraries​

TheDock includes several complete icon sets:

Included Libraries​

LibraryIconsStyle
Material Icons2,000+Google's Material Design icons
Feather280+Simple, clean line icons
TheDock UI50+Custom interface icons

Using Icons in Content​

When editing blocks that support icons (buttons, features, etc.):

  1. Select the block
  2. Find the Icon setting
  3. Click to open the icon picker
  4. Search or browse the library
  5. Click to select

Custom Icon Upload​

You can add your own icons to TheDock:

Supported Formats​

  • SVG - Recommended, scalable
  • Icon Fonts - WOFF/WOFF2 format

Uploading Icons​

  1. Go to Design > Icons
  2. Click Upload Custom Icons
  3. Select your SVG file(s)
  4. Icons appear in your custom library

SVG Requirements​

For best results, SVGs should:

  • Use a square viewBox (e.g., 0 0 24 24)
  • Have currentColor for fills/strokes (inherits text color)
  • Be optimized (remove metadata, simplify paths)

Icon Sizing​

Icons scale with your typography system:

ContextSize
InlineMatches text size
ButtonsSlightly larger than text
StandaloneConfigurable per block

Customizing Size​

Individual blocks can override icon size in their settings.

Icon Colors​

Icons automatically use the current text color. This means:

  • Icons on dark backgrounds are light
  • Icons on light backgrounds are dark
  • Color changes propagate automatically

Custom Icon Colors​

Some blocks allow specific icon colors:

  • Match brand color
  • Create visual hierarchy
  • Highlight important actions

Best Practices​

1. Choose One Library​

Stick to a single icon library for consistency. Mixing styles looks unprofessional.

2. Use Icons Purposefully​

Icons should clarify, not decorate. If text alone is clear, skip the icon.

3. Ensure Recognition​

Choose icons with universally understood meaning (hamburger menu, search magnifier, etc.).

4. Test at Small Sizes​

Icons must be recognizable even when small. Simple icons work better.

5. Consider Accessibility​

  • Icons alone aren't accessible
  • Always pair with text or aria-labels
  • Ensure sufficient contrast

Troubleshooting​

Icons not showing​

  • Check that the icon library is loaded
  • Verify the icon name is correct
  • Ensure icon fonts are properly uploaded

Icons look pixelated​

  • Use SVG format when possible
  • Check that icon size isn't scaled beyond source resolution

Icon color doesn't match​

  • Icons inherit text color by default
  • Check parent element's color setting
  • Verify SVG uses currentColor

Custom icons not appearing​

  • Confirm SVG format is valid
  • Check file size isn't too large
  • Try re-uploading

← Back to Documentation