#Social Icons

ModernDuang ships with 11 built-in social media icons, each rendered as a clean inline SVG. You can use these icons in the profile card, the footer, and other configurable areas — or supply your own custom SVG for any platform not in the built-in set.

#Where Social Icons Appear

Social icons are used in two main locations:

Additionally, the icon property on navigation menu items accepts SVG strings (not built-in social icon names — see Navigation & Menus).

#Built-in Icon Reference

The following 11 icon names are recognized. Use them as the icon value in profile.social entries or in footer.social.custom entries:

#Hover Colors

Each built-in icon has a preset hover background color that matches the platform's brand:

When a visitor hovers over a social icon, the icon inverts its color scheme and the background fills with the brand color, creating a satisfying interactive effect.

#Using Social Icons in the Profile Card

Add social links to your homepage profile card:

profile:
  avatar: /img/avatar.jpg
  motto: Code. Create. Repeat.
  social:
    - name: GitHub
      url: https://github.com/yourname
      icon: github
    - name: Bilibili
      url: https://space.bilibili.com/12345
      icon: bilibili
    - name: Email
      url: mailto:[email protected]
      icon: email

See the Profile Card guide for complete details on profile configuration.

#Using Social Icons in the Footer

There are two ways to add social icons to the footer:

#Toggle Built-in Icons

Enable the GitHub and Email toggles (which pull URLs from your profile.social):

footer:
  social:
    travelling: true
    github: true
    email: true

#Add Custom Footer Icons

Add any social icons (built-in or custom SVG) independent of the profile config:

footer:
  social:
    custom:
      - name: RSS
        url: /atom.xml
        icon: rss
        color: '#FF6600'
      - name: QQ
        url: https://wpa.qq.com/msgrd?v=3&uin=123456
        icon: qq
      - name: Steam
        url: https://steamcommunity.com/id/yourname
        icon: '<svg viewBox="0 0 24 24" fill="currentColor">...</svg>'
        color: '#1b2838'

See the Footer & ICP Beian guide for complete footer configuration.

#Using Custom SVG Icons

If the platform you need is not in the built-in list, you can supply an inline SVG string as the icon value. The SVG must follow these conventions for consistent appearance with the built-in icons:

1. Use viewBox="0 0 24 24" — All built-in icons use a 24x24 grid, so your custom SVG should match for consistent sizing
2. Use fill="currentColor" — This allows the icon color to adapt to the current text color and invert properly on hover
3. Keep it simple — Stick to a single <path> or a few simple shapes for clean rendering at small sizes

#Example: Adding a Discord Icon

profile:
  social:
    - name: Discord
      url: https://discord.gg/yourserver
      icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>'

Tip: You can find ready-made 24x24 SVG icons on sites like Simple Icons, Feather Icons, or Remix Icon. Copy the SVG markup and adjust the viewBox and fill attributes as needed.

#Icon Display Behavior

• Profile card icons: Displayed in a horizontal row. Each icon is a 36x36 pixel circle with the SVG centered inside. On hover, the circle fills with the brand color and the icon turns white.
• Footer custom icons: Same visual treatment as profile icons, displayed in the footer bar.
• Footer toggle icons (github, email, travelling): Displayed with a slightly different layout alongside the copyright line.

All icons include aria-label attributes for accessibility, using the name property you provide.

#Complete Example

Here is a comprehensive social icon setup across both profile and footer:

# Profile social links (displayed on homepage sidebar)
profile:
  avatar: /img/avatar.jpg
  motto: 学无止境
  social:
    - name: GitHub
      url: https://github.com/yourname
      icon: github
    - name: Bilibili
      url: https://space.bilibili.com/12345
      icon: bilibili
    - name: Email
      url: mailto:[email protected]
      icon: email

# Footer social icons
footer:
  social:
    travelling: true
    github: true
    email: true
    custom:
      - name: RSS
        url: /atom.xml
        icon: rss
      - name: Gitee
        url: https://gitee.com/yourname
        icon: gitee

#Related Pages

• Profile Card — Profile card configuration with social links
• Footer & ICP Beian — Footer social icons and custom links
• Navigation & Menus — Custom SVG icons for menu items