---
# System prepended metadata

title: 仿Facebook圖片資源
tags: [Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI]

---

# 仿Facebook圖片資源
###### tags: `Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI`

### 一般圖片

https://bruce-fe-fb.web.app/image/right-arrow.svg

https://bruce-fe-fb.web.app/image/left-arrow.svg

https://bruce-fe-fb.web.app/image/search.svg

https://bruce-fe-fb.web.app/image/plus.svg

https://bruce-fe-fb.web.app/image/messenger.svg

https://bruce-fe-fb.web.app/image/bell.svg

https://bruce-fe-fb.web.app/image/down.svg

https://bruce-fe-fb.web.app/image/avator.png

https://bruce-fe-fb.web.app/image/left/activity.svg

https://bruce-fe-fb.web.app/image/left/cloudy.png

https://bruce-fe-fb.web.app/image/left/dynamic.svg

https://bruce-fe-fb.web.app/image/left/facemask.svg

https://bruce-fe-fb.web.app/image/left/friend.svg

https://bruce-fe-fb.web.app/image/left/job.png

https://bruce-fe-fb.web.app/image/left/messenger.svg

https://bruce-fe-fb.web.app/image/left/pay.png

https://bruce-fe-fb.web.app/image/left/sale.png

https://bruce-fe-fb.web.app/image/left/star.svg

https://bruce-fe-fb.web.app/image/left/store.svg

https://bruce-fe-fb.web.app/image/left/watchingTv.svg

https://bruce-fe-fb.web.app/image/camera.svg

https://bruce-fe-fb.web.app/image/photo.svg

https://bruce-fe-fb.web.app/image/feel.svg

https://bruce-fe-fb.web.app/image/video.svg

https://bruce-fe-fb.web.app/image/earth.svg

https://bruce-fe-fb.web.app/image/more.svg

https://bruce-fe-fb.web.app/image/item.png

https://bruce-fe-fb.web.app/image/like-blue.svg

https://bruce-fe-fb.web.app/image/like.svg

https://bruce-fe-fb.web.app/image/chat.svg

https://bruce-fe-fb.web.app/image/share.svg

https://bruce-fe-fb.web.app/image/story.png


### SVG code

- FB logo

```
<svg viewBox="0 0 36 36" class="fill-current text-fb" height="39" width="39">
  <defs>
    <linearGradient
      x1="50%"
      x2="50%"
      y1="97.0782153%"
      y2="0%"
    >
      <stop offset="0%" stop-color="#0062E0"></stop>
      <stop offset="100%" stop-color="#19AFFF"></stop>
    </linearGradient>
  </defs>
  <path
    d="M15 35.8C6.5 34.3 0 26.9 0 18 0 8.1 8.1 0 18 0s18 8.1 18 18c0 8.9-6.5 16.3-15 17.8l-1-.8h-4l-1 .8z"
  ></path>
  <path
    class="fill-current text-white"
    d="M25 23l.8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15v12.7c1 .2 2 .3 3 .3s2-.1 3-.3V23h4z"
  ></path>
</svg>
```

- 放大鏡

```
<svg
    xmlns="http://www.w3.org/2000/svg"
    class="w-[18px] h-[18px] mr-2"
    fill="none"
    viewBox="0 0 24 24"
    stroke="#9ba3af"
    >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
    />
</svg>

```

- 編輯

```
<svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    width="22"
    height="22"
    viewBox="0 0 24 24"
    stroke="white"
    >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
    />
</svg>
```


- 書本

```

<svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    width="22"
    height="22"
    viewBox="0 0 24 24"
    stroke="white"
    >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
    />
</svg>
```

- 影片

```
<svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    width="22"
    height="22"
    viewBox="0 0 24 24"
    stroke="white"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
    />
</svg>
```

- 登出

```
<svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    width="22"
    height="22"
    viewBox="0 0 24 24"
    stroke="white"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
    />
</svg>
```