02.03 — Iconografia

ÍCONES COM PROPÓSITO.

Ícone não é decoração. Cada ícone presente em uma peça deve ter função clara. Na dúvida: omite.

Biblioteca adotada: Phosphor Icons — open source, MIT license. Mesmo set disponível no Canva (via Iconify) e no código (npm). Peso padrão: Regular.

Regras de uso

Tamanho — UI

→16px — inline em texto
→20px — padrão em UI
→24px — ícone featured

Cor padrão

→#8a8a8a (muted) — estado neutro
→#f0ece4 (white) — destaque
→#c8a44e (gold) — ativo/hover

Contexto

→UI digital: qualquer tamanho
→Posts Instagram: raramente
→Propostas/PDFs: com moderação

Como usar no Canva

No menu lateral do Canva, clique em Apps → Iconify → selecione a coleção Phosphor → filtre por peso Regular → aplique as cores do sistema.

Como usar no Next.js

Instalação

npm install @phosphor-icons/react

Uso em componente

import { ChartLineUp, Target, InstagramLogo } from '@phosphor-icons/react'

export function ServiceCard() {
  return (
    <div>
      <ChartLineUp size={24} color="var(--white)" weight="regular" />
      <Target        size={24} color="var(--gold)"  weight="regular" />
      <InstagramLogo size={20} color="var(--gray-300)" weight="regular" />
    </div>
  )
}

CSS — tokens de ícone

--icon-sm:  16px;   /* inline em texto */
--icon-md:  20px;   /* padrão UI */
--icon-lg:  24px;   /* featured */

/* Cores: usar os tokens globais */
/* neutro:  var(--gray-300) */
/* default: var(--white)    */
/* active:  var(--gold)     */

← AnteriorTipografia Próximo →Espaçamento