Introduction

Icons are essential visual elements that help users understand and navigate your website. Palo integrates with Phosphor Icons, one of the most comprehensive and versatile icon libraries available.

Icons 是帮助用户理解和浏览网站的基本视觉元素。Palo 与 Phosphor Icons 集成，这是目前最全面、最通用的图标库之一。

Phosphor Icons offers:

• Thousands of icons in one unified family
• Multiple visual styles (stroke, fill, duotone)
• Various stroke weights
• Consistent and cohesive design

Icon Set: Phosphor Icons

Website: icon-sets.iconify.design/ph

Phosphor Icons is a flexible icon family for interfaces, diagrams, presentations, and more.

Phosphor Icons 是一个灵活的图标系列，适用于界面、图表、演示等。

Styles Available

Stroke Weights

Icon Style Variations (Real Demo)

Same icon in all six Phosphor styles — Heart:

Same variations — Star:

Same variations — House:

Icons Outside Phosphor (Brand & Regional)

Phosphor covers UI icons well, but does not include every brand logo — especially regional platforms like WeChat and Weibo. Palo ships a second icon set for these cases: Font Awesome 6 Brands (fa6-brands), loaded via astro-icon and Iconify.

Phosphor 擅长 UI 图标，但并不包含所有品牌 Logo——尤其是微信、微博等区域平台。Palo 为此内置了第二套图标库：Font Awesome 6 Brands（fa6-brands），通过 astro-icon 和 Iconify 加载。

Already Used in Palo

These icons are live in the site today — same syntax everywhere:

以下图标已在站点中使用，语法完全一致：

Footer launcher example (src/navigation.ts):

{
  label: '*WeChat: *@pp71270371',
  icon: 'fa6-brands:weixin',
  type: 'qrCode',
  qrCode: '/branding/wechat.JPG',
},
{
  label: '*Douyin: *@petepa',
  icon: 'ph:tiktok-logo',
  type: 'qrCode',
  qrUrl: 'https://v.douyin.com/...',
},

Social share bar example (src/shareConfig.ts):

{
  name: 'Weibo',
  icon: 'fa6-brands:weibo',
  actionType: 'link',
  buildUrl: ({ url, title }) =>
    `https://service.weibo.com/share/share.php?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`,
},
{
  name: 'WeChat',
  icon: 'fa6-brands:weixin',
  actionType: 'modal',
  modalId: 'palo-wechat-share-modal',
},

In any Astro component or MDX:

---
import { Icon } from 'astro-icon/components'
---

<Icon name="fa6-brands:weixin" size="24" aria-hidden="true" />
<Icon name="fa6-brands:weibo" size="24" aria-hidden="true" />

Commonly Needed fa6-brands Icons

Browse the full set at icon-sets.iconify.design/fa6-brands. Below are regional and brand icons Phosphor does not provide, ready to copy:

Not in any bundled set: Xiaohongshu (小红书) and Douyin-specific glyphs are absent from both Phosphor and fa6-brands. Palo uses ph:tiktok-logo for Douyin, or a custom SVG in public/branding/ for platforms with no Iconify entry.

暂无内置图标： 小红书和抖音专属 Logo 在 Phosphor 和 fa6-brands 中均不存在。Palo 对抖音使用 ph:tiktok-logo，无 Iconify 条目的平台可改用 public/branding/ 下的自定义 SVG。

How to Register a New Icon Set

Palo currently bundles ph and fa6-brands in astro.config.mjs:

icon({ include: { ph: ['*'], 'fa6-brands': ['*'] } })

To add another Iconify collection (e.g. simple-icons):

1. Install the JSON package:

   npm install @iconify-json/simple-icons

2. Register it in astro.config.mjs:

   icon({ include: { ph: ['*'], 'fa6-brands': ['*'], 'simple-icons': ['*'] } })

3. Use with the same <Icon> component:

   <Icon name="simple-icons:github" size="24" />

Browse all Iconify sets at icon-sets.iconify.design — prefix the icon name with the set ID (e.g. fa6-brands:weibo, ph:heart).

Search and Browse Icons

Visit icon-sets.iconify.design/ph for Phosphor, or icon-sets.iconify.design/fa6-brands for brand logos.

You can:

• Search by icon name (e.g., “github”, “weixin”, “home”)
• Filter by style (stroke, fill, duotone)
• Preview different sizes
• Copy icon names directly

How to Use Icons in Palo

Basic Usage

---
import { Icon } from 'astro-icon/components'
---

<!-- Basic icon -->
<Icon name="ph:house" />

<!-- With size -->
<Icon name="ph:github-logo" size="24" />

<!-- Brand icon outside Phosphor -->
<Icon name="fa6-brands:weixin" size="24" />

<!-- With custom color -->
<Icon name="ph:youtube-logo" size="48" class="text-red-500" />

Using Different Styles

<Icon name="ph:heart" size="48" />
<Icon name="ph:heart-fill" size="48" />
<Icon name="ph:heart-bold" size="48" />
<Icon name="ph:heart-thin" size="48" />
<Icon name="ph:heart-light" size="48" />
<Icon name="ph:heart-duotone" size="48" />

Using in Navigation

Add icons to navigation items in src/navigation.ts:

{
  label: 'GitHub',
  href: 'https://github.com/your-username',
  icon: 'ph:github-logo',
},
{
  label: 'WeChat',
  icon: 'fa6-brands:weixin',
  type: 'qrCode',
  qrCode: '/branding/wechat.JPG',
},

Using in Components

<button>
  <Icon name="ph:magnifying-glass" size="20" />
  Search
</button>

<div class="flex items-center gap-2">
  <Icon name="ph:envelope" size="24" />
  <span>contact@example.com</span>
</div>

Icon Showcase

Social Media Icons (Phosphor)

UI Icons

Action Icons

Different Sizes

Common Icon Names

Navigation & UI

Social Media

Actions

Tips

1. Consistency: Use the same icon style throughout your site

2. Size Matters: Match icon sizes to text sizes for visual harmony

3. Accessibility: Always include text labels or ARIA descriptions for screen readers

4. Color: Use Tailwind classes like text-primary for easy color customization

5. Brand icons: Reach for fa6-brands: when Phosphor has no logo — check icon-sets.iconify.design first

6. 一致性：在整个网站中使用相同的图标风格

7. 尺寸：将图标尺寸与文字尺寸匹配以获得视觉和谐

8. 无障碍：始终为屏幕阅读器添加文字标签或 ARIA 描述

9. 颜色：使用 Tailwind 类如 text-primary 以便轻松自定义颜色

10. 品牌图标：Phosphor 没有 Logo 时使用 fa6-brands: — 先在 Iconify 搜索

Conclusion

Phosphor Icons provides everything you need for beautiful, consistent iconography in your Palo website. For regional brand logos, use the bundled fa6-brands set with the same <Icon> component — no extra import path required.

Phosphor Icons 为 Palo 网站提供了美观、一致的 UI 图标。区域品牌 Logo 使用内置的 fa6-brands 集合，语法与 Phosphor 完全相同。

Remember to visit icon-sets.iconify.design/ph for UI icons, and icon-sets.iconify.design/fa6-brands for brand logos.