Ant DesignPixel Icon
Semantic vector graphics. Convert from package @mekari/pixel-icon. Before use icons, you need to install @ant-design/icons package:
npm install --save @ant-design/iconsSource#
From Mekari Pixel page
When To Use#
when you need the icon in Mekari Pixel Icon on react js
List of icons#
Alert
- done
- error
- help
- info
- pending
- progress
- warning-circular
- warning-triangle
Arrows
- arrows-down
- arrows-left
- arrows-right
- arrows-up
- caret-down
- caret-right
- caret-up
- chevrons-down
- chevrons-forward
- chevrons-left
- chevrons-previous
- chevrons-right
- chevrons-up
Features
- account-mapping
- add-ons
- application
- assets
- bank
- billing
- briefcase
- broadcast
- calculator
- cart
- cash-in
- cash-out
- categories
- certificate
- channel
- chart-of-account
- chat
- comment
- commuting
- company
- connected apps
- contact
- dashboard
- document-sent
- draft
- education
- employee
- employment
- envelope
- esignature
- expenses
- filter
- finance
- flag
- home
- hospital
- inbox
- lifestyle
- like
- location
- log
- mekari pay
- migrate
- mobile
- mobile-postpaid
- notification
- overtime
- password
- payroll
- payslip
- people
- performance
- phone
- pipeline
- place-fields
- plans
- play-video
- products
- profile
- promo
- protection
- reimbursement
- reports
- roles
- sales
- schedule
- security
- sent
- share
- stock-available
- stock-bulk-update-sku
- stock-out-of-stock
- stock-running-out
- team
- tips
- today
- transfer
- voucher
- warehouse
- wifi
Files Documents
- blank
- copy
- doc
- excel-document
- folder-close
- folder-open
- id-card
- img
- word-document
- zip
Interface Essentials
- add-circular
- approval-rules
- attachment
- calendar
- camera
- checkbox-checklist
- checkbox-partial
- delete
- download
- edit
- empty
- fallback
- fingerprint
- help-centre
- hide
- minus-circular
- newtab
- paint-bucket
- pin
- redo
- refresh
- search
- settings
- show
- sign-in
- sign-out
- table-view-column
- table-view-field
- table-view-filter
- table-view-list
- table-view-sort
- task-done
- task-on progress
- task-to do
- time
- undo
- upload
- verified
Logo
- Axis
- DJP
- Gopay
- Indosat
- OVO
- PLN-Token
- PLN
- Shopeepay
- Smartfren
- Telkomsel
- Tri
- XL
- chat-black
- chat-brand
- flex-black
- flex-brand
- jurnal-black
- jurnal-brand
- klikpajak-black
- klikpajak-brand
- mekari-black
- mekari-brand
- pay-black
- pay-brand
- sign-brand
- talenta-black
- talenta-brand
Other Icons
- accordion-collapse
- accordion-expand
- apply-all
- burger
- check
- close
- crop
- drag
- fit-screen
- indicator-circle
- indicator-square
- link
- loader-
- menu-kebab
- menu-meatball
- reset
- shortcuts
- sliders
- sort-ascending
- sort-default
- sort-descending
Examples
Basic Icon
import { PixelIcon, Space } from 'antd';
ReactDOM.render(
<Space>
<PixelIcon icon="settings" />
<PixelIcon icon="settings" variant="fill" />
<PixelIcon icon="settings" variant="duotone" />
</Space>,
mountNode,
);You can customize the css style of the icon such as font-size, color and others.
color on style attribute only work on icon with variant outline
import { PixelIcon,Space } from 'antd';
ReactDOM.render(
<Space align="center">
<PixelIcon icon="settings" style={{color:'red',fontSize:'64px'}} />
<PixelIcon icon="settings" style={{fontSize:'32px'}} variant="fill" />
<PixelIcon icon="settings" style={{fontSize:'48px'}} variant="duotone" />
</Space>
, mountNode);Spin
import { PixelIcon,Space } from 'antd';
ReactDOM.render(
<Space>
<PixelIcon icon="settings" spin />
<PixelIcon icon="settings" spin variant="fill" />
<PixelIcon icon="settings" spin variant="duotone" />
</Space>
, mountNode);Apart from using fontSize in the style attribute, you can also set the icon size with the size attribute. Note: if an icon contains style and size attributes, then what will be read is the value for the size attribute.
import { PixelIcon, Space } from 'antd';
ReactDOM.render(
<Space>
<PixelIcon icon="settings" size={64} />
<PixelIcon icon="settings" size={128} variant="fill" />
<PixelIcon icon="settings" size={32} style={{ fontSize: 256 }} variant="duotone" />
</Space>,
mountNode,
);API#
<PixelIcon icon="billing" />| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| icon | icon name | string | - | |
| variant | icon variant | outline | filled | duotone | outline | |
| rotate | Rotate degrees (not working in IE9) | number | - | |
| spin | Rotate icon with animation | boolean | false | |
| style | The style properties of icon, like fontSize and color | CSSProperties | - | |
| size | icon size | number | - | 1.2.3 |