Platphorm Design
Open Editor
Integrations

SVG Service

Access a vast library of SVG icons and illustrations. Search, browse, and import directly into your designs.

Service Overview
svg.platphormnews.com

The SVG Service provides access to thousands of icons and illustrations organized by category. All SVGs are optimized for web use and can be customized with colors and sizing.

Icons

50,000+

Illustrations

10,000+

Categories

100+

Styles

12

Search API
Find SVGs by keyword or category
// GET https://svg.platphormnews.com/api/v1/search

const params = new URLSearchParams({
  q: 'arrow',           // Search query
  style: 'outline',     // Icon style (outline, solid, duotone)
  category: 'ui',       // Category filter
  limit: '20',          // Results per page
  offset: '0'           // Pagination offset
})

const response = await fetch(
  `https://svg.platphormnews.com/api/v1/search?${params}`,
  { headers: { 'X-PlatPhorm-API-Key': apiKey } }
)

const results = await response.json()
// {
//   results: [
//     {
//       id: "svg_arrow_right_001",
//       name: "Arrow Right",
//       category: "ui",
//       style: "outline",
//       tags: ["arrow", "direction", "navigation"],
//       thumbnailUrl: "https://...",
//       svgUrl: "https://..."
//     }
//   ],
//   total: 150,
//   pagination: { limit: 20, offset: 0 }
// }
Import to Canvas
Add SVGs directly to your design
import { useSvgImport } from '@/hooks/use-svg-import'

function SvgBrowser() {
  const { importSvg, isImporting } = useSvgImport()

  const handleImport = async (svgId: string) => {
    const element = await importSvg(svgId, {
      position: { x: 100, y: 100 },
      size: { width: 48, height: 48 }
    })
    
    // Element is added to canvas
    console.log('Imported:', element.id)
  }

  return (
    <button onClick={() => handleImport('svg_arrow_001')}>
      Import Arrow
    </button>
  )
}
Collections
Save and organize favorite SVGs
// Create a collection
const collection = await fetch(
  'https://svg.platphormnews.com/api/v1/collections',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-PlatPhorm-API-Key': apiKey },
    body: JSON.stringify({
      name: 'UI Icons',
      description: 'Icons for the dashboard'
    })
  }
).then(r => r.json())

// Add SVG to collection
await fetch(
  `https://svg.platphormnews.com/api/v1/collections/${collection.id}/svgs`,
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-PlatPhorm-API-Key': apiKey },
    body: JSON.stringify({ svgId: 'svg_arrow_001' })
  }
)

// List collection items
const items = await fetch(
  `https://svg.platphormnews.com/api/v1/collections/${collection.id}/svgs`
).then(r => r.json())
MCP Tools
AI agent access via Model Context Protocol
// Available MCP tools for SVG service

// Search for SVGs
await mcp.call('svg_search', {
  query: 'navigation arrow',
  style: 'outline',
  limit: 10
})

// Import SVG to current design
await mcp.call('svg_import', {
  svgId: 'svg_arrow_001',
  designId: 'design_current',
  position: { x: 100, y: 100 },
  size: { width: 48, height: 48 },
  stroke: '#000000'
})

// Browse categories
await mcp.call('svg_categories', {})

// Get SVG details
await mcp.call('svg_get', {
  svgId: 'svg_arrow_001'
})
Icon Styles
Available icon style variants

outline

Clean stroke-based icons

solid

Filled icons for emphasis

duotone

Two-tone layered icons

thin

Delicate 1px stroke icons

bold

Thick 3px stroke icons

brand

Logo and brand icons

Best Practices
Tips for working with SVGs

Consistent Sizing

Use consistent icon sizes throughout your design. Common sizes are 16px, 20px, 24px, and 32px.

Matching Styles

Stick to one icon style (outline, solid, etc.) within a design for visual consistency.

Color Harmony

Match icon colors to your design palette. Use the same color for all icons or a coordinated set.

Related Documentation