Ícones Gerais

28 ícones para uso geral na interface — pessoas, objetos, ações e categorias. Cada ícone exibido nas suas proporções exatas do Figma.

Coração

iPhone

iPhone Camera

Cartão

Mouse

Conexão

Base

Seta Brand

Baixar

Ampliar

Seta

Caixa

Sacola

Caixa 3D

Chat

Block

Calendário

Instagram

Mail

Box

Check

Pessoa

Pessoas Time

Foco

Localização

Clock

Dinheiro

Ícones Design

8 ícones de sistema de design — logotipo, símbolo, paleta, tipografia, ícones, section, glass e uso.

Logotipo

Símbolo

Paleta de Cores

Tipografia

Ícones

Section e Forma

Glass

Uso

Proporcionalidade

Regra central da biblioteca: nunca aplicar mesma W e H para ícones diferentes. Cada ícone tem proporções definidas no Figma que precisam ser respeitadas.

Princípio

Mesmo fator de escala em W e H de cada ícone.

Cada ícone tem suas próprias dimensões no Figma — largura e altura diferentes entre si. Para manter as proporções corretas ao reduzir ou ampliar, aplica-se um único fator de escala multiplicado em W e H simultaneamente. Isso preserva a relação exata entre largura e altura de cada ícone, como definido no Figma. Ícones largos continuam largos, estreitos continuam estreitos — nenhum fica distorcido.

Fórmula

displayW = Math.round(figmaW × scale)
displayH = Math.round(figmaH × scale)

Fator atual nesta página

0.3×

O mesmo fator é aplicado em W e H de cada ícone. Ajuste conforme o contexto — o que não pode mudar é que W e H usem o mesmo fator.

Uso em código

const scale = 0.75
const w = Math.round(icon.figmaW * scale)
const h = Math.round(icon.figmaH * scale)

<img style={{ width: w, height: h }} />

✗

Incorreto — mesma W × H forçada para todos

Pessoa

80 × 80 ← distorcido

Pessoas Time

80 × 80 ← distorcido

Forçar 80×80 ignora que Pessoa (139×193) e Pessoas Time (219×194) têm proporções diferentes. O resultado distorce os dois.

✓

Correto — mesmo fator de escala aplicado em W e H

Pessoa

70 × 97

Pessoas Time

110 × 97

Fator 0.5 aplicado em W e H de cada ícone — Pessoa 139×193 → 70×97, Pessoas Time 219×194 → 110×97. Cada ícone com W e H próprios, ambos proporcionais ao original do Figma.

Referência — Ícones Gerais (scale 0.3×)

Ícone	Figma W	Figma H	Display W	Display H	Razão W/H
Coração	206	188	62	56	1.096
iPhone	154	191	46	57	0.806
iPhone Camera	232	152	70	46	1.526
Cartão	231	152	69	46	1.520
Mouse	152	231	46	69	0.658
Conexão	171	191	51	57	0.895
Base	149	187	45	56	0.797
Seta Brand	163	65	49	20	2.508
Baixar	161	191	48	57	0.843
Ampliar	173	173	52	52	1.000
Seta	161	158	48	47	1.019
Caixa	225	204	68	61	1.103
Sacola	171	183	51	55	0.934
Caixa 3D	214	183	64	55	1.169
Chat	171	180	51	54	0.950
Block	164	188	49	56	0.872
Calendário	173	187	52	56	0.925
Instagram	170	170	51	51	1.000
Mail	170	170	51	51	1.000
Box	170	171	51	51	0.994
Check	178	170	53	51	1.047
Pessoa	139	193	42	58	0.720
Pessoas Time	219	194	66	58	1.129
Um	188	188	56	56	1.000
Foco	188	190	56	57	0.989
Localização	174	202	52	61	0.861
Clock	190	190	57	57	1.000
Dinheiro	190	190	57	57	1.000

Referência — Ícones Design (scale 0.3×)

Ícone	Figma W	Figma H	Display W	Display H	Razão W/H
Logotipo	170	171	51	51	0.994
Símbolo	170	171	51	51	0.994
Paleta de Cores	149	171	45	51	0.871
Tipografia	126	116	38	35	1.086
Ícones	170	171	51	51	0.994
Section e Forma	171	171	51	51	1.000
Glass	170	171	51	51	0.994
Uso	188	190	56	57	0.989

Nunca forçar mesma W e H para ícones diferentes

Ícones com razões W/H distintas ficam distorcidos se recebem as mesmas dimensões. A única exceção são ícones perfeitamente quadrados no Figma (razão 1.000).

Aplicar sempre o mesmo fator nas duas dimensões

O fator de escala é multiplicado em W e em H do mesmo ícone. Nunca fixe só a altura e derive a largura — isso distorce ícones que têm alturas muito diferentes entre si.

Usar o mesmo fator para todos os ícones do mesmo contexto

Em um card, lista ou seção, todos os ícones usam o mesmo fator de escala. Ícones de contextos diferentes (hero vs. lista) podem ter fatores distintos, mas dentro de cada contexto o fator é único.

Calcular com Math.round() para evitar meio pixel

Math.round(figmaW * scale) garante valores inteiros. Dimensões fracionadas causam renderização borrada em telas não-retina.

Registrar dimensões no arquivo de dados

Qualquer ícone novo deve ser adicionado a src/data/icons.ts com figmaW e figmaH exatos — os valores do viewBox do SVG exportado, não do canvas do Figma após rotação.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter