SVG 图标

Algarve Turismo

还没有评分，抢首评

文旅景区

复制与下载

SVG 矢量格式 · 当前版本

使用场景

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

按钮内

输入框

搜索Algarve Turismo...

导航

Algarve Turismo

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41

Algarve Turismo

浏览器 · 标签页与站点

bcb31704d44a1f59.example

Algarve Turismo开始使用

操作按钮 · 主次层级

Algarve Turismo了解更多

底部导航 · Tab 栏

Algarve Turismo推荐收藏我的

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">
  <!-- 内联 Algarve Turismo 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">
  <!-- 内联 Algarve Turismo SVG -->
  立即开始
</button>

React 组件

内联引入

react

import { AlgarveTurismoIcon } from './icons';

function Nav() {
  return <AlgarveTurismoIcon 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">
  <!-- 内联 Algarve Turismo SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索Algarve Turismo…

html

<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 Algarve Turismo SVG -->
  <input placeholder="搜索Algarve Turismo…" 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">
    <!-- 内联 Algarve Turismo SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

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

描画

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

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

呼吸

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

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

旋转

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

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

用法示例

Algarve Turismo 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

Algarve Turismo

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Algarve Turismo

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

24px

32px

48px

64px

96px

128px

下载 Algarve Turismo 图标

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

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

复制 Algarve Turismo 图标代码

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

svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M172.502 56.122c6.471 0 11.75 5.326 11.75 11.856 0 6.529-5.279 11.855-11.75 11.855-6.473 0-11.752-5.326-11.752-11.855 0-6.53 5.279-11.856 11.752-11.856z" fill="#389ad5"/><path d="M29.567 121.404c-16.83 15.5-30.548-8.986-12.669-15.654 3.602-1.43 10.418-.123 11.779-1.928 3.285-5.99-8.828-8.432-10.18-.895H9.905c.15-15.541 27.817-15.132 28.111-2.615v21.092l1.383 2.311V80.599l9.063.004v20.817c4.256-11.487 19.072-13.992 24.271-4.805v-4.311h8.295l-.153 9.7c3.997-15.778 28.291-12.681 28.417-1.385v19.555c.217 2.086 1.037 3.42 2.457 4.002V92.304h8.633l-.031 5.698c1.947-4.14 5.324-5.774 9.678-5.698h5.684l6.605 23.403 7.066-23.403 9.064-.153-.463 2.617c11.639-6.58 24.875-3.462 25.961 10.931v5.854h-22.428c.572 10.299 11.061 9.6 13.211 4.002h8.91c.732 11.588-28.678 19.736-31.029-4.004l-5.838 13.857h-8.756l-9.371-25.096c-5.695-.051-8.002 2.938-7.986 8.006v17.09h-18.434l-1.689-3.234c-5.955 6.021-13.748 6.096-19.662-.574 2.989 19.232-30.578 19.955-31.03 4.732h9.218c2.557 6.65 15.261 4.32 12.749-4.619-6.655 5.797-19.736 3.418-23.348-6.684v10.379H31.718c-2.071.133-1.434-2.67-2.151-4.004zm34.871-22.633c4.398 0 7.987 4.357 7.987 9.701 0 5.342-3.589 9.699-7.987 9.699-4.4 0-7.989-4.357-7.989-9.699 0-5.343 3.588-9.701 7.989-9.701zm16.436 4.465v8.873c2.858-7.85 17.179-6.068 18.126-7.486 7.561-5.381-8.767-9.894-8.757-1.695l-9.369.308zm-51.541 6.619l-.08 5.258c-1.097 5.367-11.818 6.455-11.676.594.579-6.291 8.663-3.539 10.18-5.9l1.576.048zm71.536 0l-.08 5.258c-1.098 5.367-11.819 6.455-11.677.594.58-6.291 8.663-3.539 10.181-5.9l1.576.048zm61.092-4.15h13.104c-.021-4.605-2.252-6.793-6.377-6.771-4.713-.057-6.729 2.871-6.727 6.771z" fill="#389ad5"/><path d="M136.518 87.778v-3.572h.867v-.771h-.867v-1.544h-.725v1.544h-.869v.771h.869v3.614c0 .423.076.731.227.926.152.193.402.291.75.291.084 0 .197-.011.338-.032.141-.021.238-.035.295-.042l-.018-.729h-.346c-.191 0-.326-.034-.404-.101-.078-.068-.117-.186-.117-.355zm6.023-4.343h-.725v2.991c0 .556-.148 1.01-.447 1.363-.297.353-.688.528-1.17.528-.371 0-.66-.104-.869-.312-.207-.208-.311-.498-.311-.872v-3.699h-.725v4.026c0 .514.152.918.455 1.21.303.292.715.438 1.238.438.371 0 .715-.076 1.033-.227.316-.152.592-.407.828-.766v.846h.691v-5.526h.002zm2.182 5.527v-3.213c0-.409.146-.757.438-1.046a1.437 1.437 0 0 1 1.045-.434h.389v-.951a.794
…

预览参数

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

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Algarve Turismo 图标

Algarve Turismo 是文旅景区分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。文旅景区与目的地的标识。

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

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

常见问题

Algarve Turismo 图标是什么？

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

如何下载 Algarve Turismo 图标？

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

Algarve Turismo 图标可以商用吗？

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

如何修改 Algarve Turismo 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

5.82 KB

5,959 字节

viewBox

0 0 192.756 192.756

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

图元总数

<path> ×4

风格

多彩

3 种品牌色 · 纯填充

提取色值#389ad5#f2ca30#d78ca3

相似图标

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

73%

72%

61%

58%

57%

57%

57%

Construtora Costa Feitosa

56%

56%

56%

56%

55%

同色系图标

品牌色 #389ad5 的同色相色阶，点击复制色值；下方为品牌色同色相的其他图标。

#eaf4fb#cce5f4#9accea#5faedd#2b8eca#389ad5#2273a3#184f71

Algarve Turismo 品牌色详表
RGB	HSL	CMYK	色名
56, 154, 213	203°, 65%, 53%	74, 28, 0, 16	品牌主色 · 矢车菊蓝
204, 229, 244	203°, 65%, 88%	16, 6, 0, 4	浅灰色
154, 204, 234	203°, 66%, 76%	34, 13, 0, 8	天蓝色
95, 174, 221	202°, 65%, 62%	57, 21, 0, 13	矢车菊蓝

#86c8e6

#0094d6

#42afda

#0656a5

#3060a5

#0a8d8a

#182359

Construtora Costa Feitosa

architecture

#2c2f3e

图标信息摘要

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