跳到主要内容
网站首页

图标库

返回 SVG 图标
Oporto

SVG 图标

Oporto

还没有评分，抢首评
标签消费品牌

复制与下载

SVG 矢量格式 · 当前版本
官方网站

使用场景

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

按钮内

输入框

image/svg+xml
搜索Oporto...

导航

image/svg+xml
Oporto

空状态

image/svg+xml

暂无内容

场景预览

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

手机桌面 · App 图标

9:41
image/svg+xml
Oporto

浏览器 · 标签页与站点

image/svg+xml
www.oporto.com.au
image/svg+xml
Oporto开始使用

操作按钮 · 主次层级

image/svg+xml
Oporto了解更多

底部导航 · Tab 栏

image/svg+xml
Oporto推荐收藏我的

UI 使用示例

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

导航项

导航菜单

image/svg+xml
导航菜单
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">
  <!-- 内联 Oporto 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">
  <!-- 内联 Oporto SVG -->
  立即开始
</button>

React 组件

内联引入

image/svg+xml
react
import { OportoIcon } from './icons';

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

状态徽标

已完成

image/svg+xml
已完成
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">
  <!-- 内联 Oporto SVG -->
  已完成
</span>

输入框前缀

搜索框

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

功能卡片

功能名称

image/svg+xml

功能名称

功能的一句话说明。

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">
    <!-- 内联 Oporto SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

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

描画

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

image/svg+xml 
.icon-3d7ead150c284c79 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

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

image/svg+xml 
.icon-3d7ead150c284c79 { animation: svg-breathe 1.8s infinite; }

旋转

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

image/svg+xml 
.icon-3d7ead150c284c79 { animation: svg-spin 1.6s linear infinite; }

用法示例

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

image/svg+xml
继续下一步

按钮内
16px · action 触发

image/svg+xml
Oporto

导航项
18px · 列表选中态

image/svg+xml

暂无数据

空状态
40px · 引导提示

各尺寸下的 Oporto

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

image/svg+xml

24px

image/svg+xml

32px

image/svg+xml

48px

image/svg+xml

64px

image/svg+xml

96px

image/svg+xml

128px

下载 Oporto 图标

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

按预览颜色导出px（16~1024）

复制 Oporto 图标代码

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

svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Created with Inkscape (http://www.inkscape.org/) --><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 35.402133 11.518543" version="1.1" id="svg8"><defs id="defs2" /><metadata id="metadata5"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><g id="layer1" transform="translate(-171.41923,-310.7632)"><g id="g75" transform="translate(0.13229248,-0.13229384)"><path id="path10" d="m 187.62178,317.44809 c -0.41936,0 -0.75909,-0.33311 -0.75909,-0.74401 0,-0.41063 0.33973,-0.74374 0.75909,-0.74374 0.4191,0 0.75909,0.33311 0.75909,0.74374 0,0.4109 -0.33999,0.74401 -0.75909,0.74401 m -0.004,-2.37543 c -0.91652,0 -1.65973,0.72813 -1.65973,1.62639 0,0.89826 0.74321,1.6264 1.65973,1.6264 0.91652,0 1.65947,-0.72814 1.65947,-1.6264 0,-0.89826 -0.74295,-1.62639 -1.65947,-1.62639 m 3.1586,0.97525 -2.7e-4,-10e-4 -0.0116,0.007 z m -0.34449,-0.85275 10e-4,-2.6e-4 -2.6e-4,-2.7e-4 z m 1.2356,0.71596 c 0,-0.14181 0.0103,-0.27649 0.0296,-0.40401 0.006,-0.0408 0.0138,-0.0804 0.0217,-0.11986 -0.5125,-0.40931 -0.84084,-0.31433 -1.28561,-0.19262 a 3.1112354,3.1112354 0 0 1 0.3429,0.85196 c 0.15796,-0.0902 0.27173,-0.0775 0.89138,0.41302 z m 0,1.12369 v -0.0759 c -0.22066,-0.23918 -0.48683,-0.28839 -0.81306,-0.35136 a 3.0363583,3.0363583 0 0 1 -0.1016,0.90487 c 0.18759,-0.0103 0.28284,0.0529 0.61595,0.80037 0.0699,0.15663 0.17515,0.27516 0.29871,0.36565 z m -0.81439,-0.42757 10e-4,2.7e-4 v -2.7e-4 z m -0.1008,0.90647 2.6e-4,-10e-4 -0.0135,7.9e-4 z m -7.09613,-0.85223 c 0,0.23972 -0.0246,0.46699 -0.0722,0.68342 l -2.6e-4,5.3e-4 c 0.29077,0.22199 0.57388,0.20902 0.92683,0.19579 a 3.0620229,3.0620229 0 0 1 -0.12303,-0.90408 c -0.17939,0.0527 -0.28734,0.0124 -0.79375,-0.64003 l -0.0124,-0.0148 a 3.1564791,3.1564791 0 0 1 0.0749,0.67918 m 0.85567,0.87974 h -0.001 v 2.7e-4 z m -0.12436,-0.90514 v 10e-4 l 0.0127,-0.004 z m 3.51631,-3.01413 5.3e-4,-10e-4 h -2.6e-4 z" style="fill: #ed1c24;stroke-width: 2" /><path id="path12" d="m 188.827
…

预览参数

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

风格变体

image/svg+xml

细线 · 1.2px · 密集布局

image/svg+xml

常规 · 2px · 通用界面

image/svg+xml

加粗 · 3.5px · 大尺寸标题

关于 Oporto 图标

Oporto 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。

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

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

常见问题

Oporto 图标是什么？

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

如何下载 Oporto 图标？

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

Oporto 图标可以商用吗？

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

如何修改 Oporto 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

15.79 KB

16,172 字节

viewBox

0 0 35.402133 11.518543

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

图元总数

11

<path> ×11

风格

多彩

3 种品牌色 · 纯填充

提取色值#ed1c24#000000#fcc90a

同色系图标

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

#fde7e8#fbc6c8#f68e92#f14b52#e3121a#ed1c24#b30e15#7b0a0e
Oporto 品牌色详表
色值RGBHSLCMYK色名
237, 28, 36358°, 85%, 52%0, 88, 85, 7品牌主色 · 红色
251, 198, 200358°, 87%, 88%0, 21, 20, 2粉红色
246, 142, 146358°, 85%, 76%0, 42, 41, 4热粉色
241, 75, 82357°, 86%, 62%0, 69, 66, 5玫红色

图标信息摘要

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

继续探索

相关搜索

暂无推荐

相关标签

消费品牌

相关图标

暂无相关图标

Command Palette

Search for a command to run...