SVG 图标

House of Beauty

还没有评分，抢首评

美妆

复制与下载

SVG 矢量格式 · 当前版本

使用场景

颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。

按钮内

输入框

搜索House of Beauty...

导航

House of Beauty

空状态

暂无内容

场景预览

桌面 / 浏览器 / 按钮 / 导航栏

手机桌面 · App 图标

9:41

House of Beauty

浏览器 · 标签页与站点

6b20b5b01bdd42a2.example

House of Beauty开始使用

操作按钮 · 主次层级

House of Beauty了解更多

底部导航 · Tab 栏

House of Beauty推荐收藏我的

UI 使用示例

真实组件上下文中的渲染效果，代码可直接复制。

导航项

导航菜单

html

<a href="#" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800">
  <!-- 内联 House of Beauty SVG -->
  <span>导航菜单</span>
</a>

主要按钮

立即开始

html

<button class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white dark:bg-neutral-100 dark:text-neutral-900">
  <!-- 内联 House of Beauty SVG -->
  立即开始
</button>

React 组件

内联引入

react

import { HouseofBeautyIcon } from './icons';

function Nav() {
  return <HouseofBeautyIcon className="size-4" />;
}

状态徽标

已完成

html

<span class="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-medium text-neutral-700">
  <!-- 内联 House of Beauty SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索House of Beauty…

html

<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 House of Beauty SVG -->
  <input placeholder="搜索House of Beauty…" class="w-full outline-none" />
</div>

功能卡片

功能名称

功能的一句话说明。

html

<div class="rounded-xl border border-neutral-200 p-4">
  <span class="flex size-9 items-center justify-center rounded-lg bg-neutral-900 text-white">
    <!-- 内联 House of Beauty SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

为 House of Beauty 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。

描画

线条从无到有依次绘出，适合线性图标

.icon-6b20b5b01bdd42a2 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

透明度往复渐变，适合状态提示图标

.icon-6b20b5b01bdd42a2 { animation: svg-breathe 1.8s infinite; }

旋转

匀速循环旋转，适合加载中场景

.icon-6b20b5b01bdd42a2 { animation: svg-spin 1.6s linear infinite; }

用法示例

House of Beauty 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

House of Beauty

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 House of Beauty

24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。

24px

32px

48px

64px

96px

128px

下载 House of Beauty 图标

SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。

按预览颜色导出自定义尺寸px（16~1024）

复制 House of Beauty 图标代码

Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。

svg

<svg viewBox="24.89 140.53 746.11 345.03" xmlns="http://www.w3.org/2000/svg"><path d="m24.89 407.84v-266.86h35.02v112.42h145.23v-112.42h35.02v266.86h-35.02v-122.74h-145.23v122.74zm561.44 0v-266.86h71.51c32.19 0 55.9 4.67 71.14 14.01 20.88 12.53 31.33 30.72 31.33 54.55 0 14.5-3.75 26.48-11.24 35.94-7.5 9.46-17.27 16.28-29.3 20.46v.74c16.22 3.69 28.81 10.82 37.78 21.38 8.97 10.57 13.45 24.21 13.45 40.91 0 26.54-10.2 46.94-30.59 61.19-16.71 11.79-44.48 17.69-83.3 17.69h-70.77zm35.02-150.39h52.71c14.5 0 26.66-3.5 36.49-10.51 9.83-7 14.74-17.38 14.74-31.15 0-14.99-6.27-26.29-18.8-33.91-10.57-6.14-28.38-9.21-53.45-9.21h-31.7v84.78zm0 118.69h37.97c28.75 0 48.53-3.81 59.34-11.43 11.55-8.11 17.32-19.78 17.32-35.02s-5.47-25.99-16.4-33.73c-10.94-7.74-26.48-11.61-46.63-11.61h-51.6v91.78z" fill="#010101"/><path d="m411.54 172.07c-28.2 0-51.55 9.86-70.07 29.57-12.89 13.71-21.27 29.6-25.19 47.66 14.26 2.28 28.2 3.78 38.68 5.92 29.74 6.06 51.08 17.28 51.08 50.46 0 5.14-.29 9.62-.61 13.28-.33 3.65-.69 6.47-.87 7.89q-.18 1.41-.36-.98c-3.72-49.18-47.13-52.13-87.5-50.72-1.01.04-1.99.07-2.97.1.02 2.01.08 3.99.19 5.95 7.73-.44 15.39-1.13 22.53-1.09 31.17.18 58.87 7.81 64.32 41.89.43 2.71.51 3.72.54 4.23q.04.51-.43-1.09c-.47-1.59-1.41-4.78-2.28-7.52-8.42-26.68-40.35-24.4-62.33-20.11-5.58 1.09-12.33 2.89-19.34 4.32.41 1.68.86 3.34 1.35 4.98 9.95-2 20.01-4.85 29.28-6.28 21.69-3.36 43.72-1.84 50.35 24.61q.18.72-.72-.58c-18.2-26.2-45.63-4.95-68.62.65-.82.2-1.61.37-2.4.53 4.1 7.51 9.19 14.53 15.32 21.05 18.51 19.71 41.87 29.57 70.07 29.57s51.55-9.86 70.07-29.57c6.18-6.58 11.31-13.67 15.42-21.25-.47-.1-.95-.21-1.43-.33-22.99-5.6-50.42-26.85-68.62-.65q-.9 1.3-.72.58c6.62-26.45 28.66-27.97 50.35-24.61 8.96 1.39 18.65 4.09 28.27 6.08.49-1.64.94-3.31 1.35-4.99-6.64-1.39-13.01-3.07-18.32-4.11-21.97-4.29-53.9-6.57-62.33 20.11-.87 2.75-1.81 5.93-2.28 7.52q-.47 1.59-.43 1.09c.04-.51.11-1.52.54-4.23 5.45-34.08 33.14-41.71 64.32-41.89 6.81-.04 14.1.58 21.46 1.03.11-1.95.17-3.92.19-5.92l-1.9-.06c-40.37-1.41-83.78 1.53-87.5 50.72q-.18 2.39-.36.98c-.18-1.41-.54-4.23-.87-7.89-.33-3.65-.61-8.14-.61-13.28 0-33.18 21.34-44.4 51.08-50.46 10.23-2.09 23.74-3.57 37.64-5.75-3.91-18.12-12.3-34.07-25.22-47.82-18.52-19.71-41.88-29.57-70.07-29.57z" fill="none"/><path d="m341.47 201.64c18.51-19.71 41.87-29.57 70.07-29.57s51.55 9.86 70.07 29.57c12.92 13.76 21.32 29.7 25.22 47.82 11.34-1.78 22.93-4.04 33.21-7.47-5.
…

预览参数

调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 House of Beauty 图标

House of Beauty 是美妆分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。美妆护肤品牌的标识。

在本页点击「下载」即可保存 House of Beauty 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

House of Beauty 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 7.32 KB，viewBox 为 24.89 140.53 746.11 345.03，共 9 个矢量图元。

常见问题

House of Beauty 图标是什么？

House of Beauty 是美妆分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。

如何下载 House of Beauty 图标？

在本页点击「下载 SVG」即可保存 House of Beauty 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

House of Beauty 图标可以商用吗？

House of Beauty 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。

如何修改 House of Beauty 图标的颜色？

在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。

SVG 健康报告

100/100

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

文件体积

7.32 KB

7,500 字节

viewBox

24.89 140.53 746.11 345.03

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

图元总数

<path> ×9

风格

单色品牌

1 种品牌色 · 纯填充

提取色值#010101

相似图标

按名称与标签相似度排序。

56%

56%

55%

54%

53%

53%

53%

53%

52%

52%

52%

52%

同色系图标

品牌色 #010101 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。

#f2f2f2#e0e0e0#c2c2c2#9e9e9e#7a7a7a#010101#292929#141414

House of Beauty 品牌色详表
RGB	HSL	CMYK	色名
1, 1, 1	0°, 0%, 0%	0, 0, 0, 100	品牌主色 · 黑色
224, 224, 224	0°, 0%, 88%	0, 0, 0, 12	浅灰色
194, 194, 194	0°, 0%, 76%	0, 0, 0, 24	银色
158, 158, 158	0°, 0%, 62%	0, 0, 0, 38	灰色

图标信息摘要

House of Beauty 是一个美妆类别的单文件 SVG 矢量图标，文件体积 7.32 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 House of Beauty的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。