:global(.ring-icon) { margin: 8px; padding: 8px; } import React from 'react'; import {render} from 'react-dom'; import { SearchIcon, CheckmarkIcon, PencilIcon, PermissionIcon } from '@jetbrains/ring-ui/components/icon'; render( , document.getElementById('icon-container') ); render( , document.getElementById('icon-search') ); render( , document.getElementById('icon-16-pencil') ); render( , document.getElementById('icon-14-pencil') ); render( , document.getElementById('icon-custom-permission') );

All available icons are listed below. Place the cursor over an icon to see its name.

@value unit, link-color from '../global/global.css'; :global(.icon-example__container) { margin-left: calc(0 - calc(unit * 2)); } :global(.ring-icon) { margin: 8px; padding: 8px; color: link-color; } import 'core-js/modules/es7.object.values'; import React from 'react'; import {render} from 'react-dom'; import * as icons from '@jetbrains/ring-ui/components/icon/icons'; render(

{Object.values(icons).map(Icon => )}

, document.getElementById('all-icons') );

:global(.ring-icon) { color: black; margin: 8px; padding: 8px; } import 'core-js/modules/es7.object.values'; import React from 'react'; import {render} from 'react-dom'; import * as logos from '@jetbrains/ring-ui/components/icon/logos'; render(

{Object.values(logos).map(Logo => )}

, document.getElementById('logos') );