Qaid AID.DEV
ARTICLE

Custom Button Icons

Replace the default thumbs up/down icons with custom SVGs, emoji, or any HTML content to match your brand's visual language.

Qaid Team

The Qaid feedback embed uses thumbs up and thumbs down icons by default, but you’re not limited to these. You can replace them with any SVG, emoji, or HTML content that fits your brand. This guide shows you how to create truly unique feedback buttons.

The Default Icons

Before we customize, here’s what you get out of the box:

Default Icons

Standard thumbs up/down

Loading embed...

These work great, but let’s explore the possibilities.

Using Custom SVG Icons

The positiveIcon and negativeIcon config options accept any valid HTML string. For SVG icons, you can use inline SVG markup:

Heart & Broken Heart

Perfect for content-focused platforms, dating apps, or anywhere emotional reactions make sense:

Heart Icons

Love it or hate it

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  positiveIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </svg>`,
  negativeIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    <line x1="4" y1="4" x2="20" y2="20" stroke="currentColor" stroke-width="2"/>
  </svg>`,
  colors: {
    positive: "#ec4899",
    negative: "#6b7280"
  }
});

Star Rating Style

Great for review-focused applications:

Star Icons

Star rating style

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  positiveIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
  </svg>`,
  negativeIcon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
  </svg>`,
  colors: {
    positive: "#fbbf24",
    negative: "#6b7280"
  }
});

Check & X Marks

Clean and unambiguous, ideal for approval workflows:

Check / X Icons

Clear approval indicators

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  positiveIcon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="24" height="24">
    <polyline points="20 6 9 17 4 12"/>
  </svg>`,
  negativeIcon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="24" height="24">
    <line x1="18" y1="6" x2="6" y2="18"/>
    <line x1="6" y1="6" x2="18" y2="18"/>
  </svg>`,
  colors: {
    positive: "#22c55e",
    negative: "#ef4444"
  }
});

Arrow Up & Down

Perfect for voting systems like Reddit or Stack Overflow:

Arrow Icons

Upvote/downvote style

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  positiveIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <path d="M12 4l-8 8h5v8h6v-8h5l-8-8z"/>
  </svg>`,
  negativeIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <path d="M12 20l8-8h-5V4H9v8H4l8 8z"/>
  </svg>`,
  colors: {
    positive: "#ff4500",
    negative: "#7193ff"
  }
});

Using Emoji

For a more playful feel, you can use emoji directly. Since the icon property accepts any HTML, emoji work perfectly:

Simple Emoji Faces

Emoji Faces

Simple and universal

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  positiveIcon: '<span style="font-size: 24px">😊</span>',
  negativeIcon: '<span style="font-size: 24px">😞</span>'
});

Thumbs Emoji

Similar to the default but with emoji character style:

Thumbs Emoji

Emoji thumbs

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  positiveIcon: '<span style="font-size: 24px">👍</span>',
  negativeIcon: '<span style="font-size: 24px">👎</span>'
});

Fire & Ice

For dramatic contrast:

Fire & Ice

Hot or cold reactions

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  positiveIcon: '<span style="font-size: 24px">🔥</span>',
  negativeIcon: '<span style="font-size: 24px">🥶</span>',
  colors: {
    positive: "#f97316",
    negative: "#3b82f6"
  }
});

Rocket & Crash

Perfect for product feedback:

Rocket & Crash

Ship it or sink it

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  positiveIcon: '<span style="font-size: 24px">🚀</span>',
  negativeIcon: '<span style="font-size: 24px">💥</span>',
  colors: {
    positive: "#8b5cf6",
    negative: "#ef4444"
  }
});

Combining Icons with Custom Styling

Icons work great with custom button styles. Here’s an example combining custom SVG icons with themed button CSS:

Styled Custom Icons

Icons with custom button styling

Loading embed...
 
.cyber-btn {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2a 100%);
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cyber-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.1;
  transition: left 0.5s ease;
}

.cyber-btn:hover::before {
  left: 100%;
}

.cyber-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px currentColor;
}
new FeedbackEmbed({
  endpoint: '/api/feedback',
  buttonClass: 'cyber-btn',
  positiveIcon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
    <circle cx="12" cy="12" r="10"/>
    <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
    <line x1="9" y1="9" x2="9.01" y2="9"/>
    <line x1="15" y1="9" x2="15.01" y2="9"/>
  </svg>`,
  negativeIcon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
    <circle cx="12" cy="12" r="10"/>
    <path d="M16 16s-1.5-2-4-2-4 2-4 2"/>
    <line x1="9" y1="9" x2="9.01" y2="9"/>
    <line x1="15" y1="9" x2="15.01" y2="9"/>
  </svg>`,
  colors: {
    positive: "#00ffaa",
    negative: "#ff6688"
  }
});

Using Script Tag Data Attributes

For the script tag approach, use data-positive-icon and data-negative-icon:

<script
  src="https://unpkg.com/@bjsm/qaid"
  data-endpoint="/api/feedback"
  data-positive-icon='<span style="font-size: 24px">👍</span>'
  data-negative-icon='<span style="font-size: 24px">👎</span>'
></script>

Note: For complex SVGs, the ES Module approach is cleaner since you don’t need to worry about HTML attribute escaping.

Icon Design Tips

  1. Keep it simple: Icons should be instantly recognizable at small sizes
  2. Use currentColor: This allows your icon to inherit the button’s text color, making it easy to style with CSS
  3. Set explicit dimensions: Include width and height attributes on SVGs for consistent sizing
  4. Test at different sizes: Use the buttonSize config option to test how your icons look at small, medium, and large sizes
  5. Consider accessibility: Choose icons that clearly communicate positive vs negative meaning

Summary

Custom icons let you transform the Qaid feedback embed from a generic tool into a branded experience. Whether you use carefully crafted SVGs, playful emoji, or a combination with custom CSS, the positiveIcon and negativeIcon config options give you complete creative control.

Explore the other guides to learn about color customization, text localization, and theme presets.

Back to all articles